文档章节

Vue组件间通信(非VueX)

杜宝
 杜宝
发布于 2017/08/31 08:33
字数 325
阅读 37
收藏 3

基于以下情况

//父组件
data:{
    //对象形式
}

//子组件
data:function(){
  return {
       //函数形式  
   }
}

例子如下

<div id="app">
   //父组件
    <p>{{total}}</p>
    <mime @increment1="incrementTotal" ref="child" :num-a="total" num-s="total"></mime>
    
    <button type="button" @click="clickref">调用子组件</button>
</div>

//子组件
<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>
<script>
    new Vue({
        el:'#app',
        data :{
            total: 0          
        },
        methods:{
            incrementTotal : function(){
              
            },
            clickref:function(){
              
            }
        },
        components:{
            'mime' :{
                template:'#myInput',
                data : function(){
                    return{
                        counter : 0
                    }
                },
                props:['numA','numS'],
                methods:{
                    add : function(){
                      
                    }
                }
            }
        }
    });
</script>

子组件调用父组件

{{total}}
<mime @increment="incrementTotal"></mime>

<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>

...
<script>
....
data:{
   tatal: 0
},
methods:{
   incrementTotal:function(){
       this.total +=1;
   }
},
components:{
   data : function(){
       return:{
          counter : 0
       }
   },
    methods : {
        add : function(){
             this.counter +=1;
             this.$emit('increment'); //子组件通过 $emit触发父组件的方法 increment   还可以传参   this.$emit('increment' ,this.counter);
        }
   }
}
</script>

父组件调用子组件

<mime ref="child"></mime>
<button type="button" @click="clickref">调用子组件</button>

<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>

...
<script>
....

methods:{
   clickref:function(){
          var child = this.$refs.child; //获取子组件实例
          child.counter = 45;           //改变子组件数据
          child.add(11);                //调用子组件方法 add
       }
},
components:{
   data : function(){
       return:{
          counter : 0
       }
   },
    methods : {
        add : function(num){
             this.counter +=1;
             console.log('接受父组件的值:',num) //num为11
        }
   }
}
</script>

组件间互调


//新建一个空的
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})

总结: 太繁琐,直接用Vuex

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 2
博文 33
码字总数 16488
作品 0
兰州
理解vuex -- vue的状态管理模式

vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。...

wenxingjun
07/25
0
0
Vue2.0学习(三)--Vue数据通信详解

一、前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。组件间如何传递数据就显得至关重要。本文尽可能罗列出一些常见的数据...

人心思动
08/09
0
0
Step-by-step,打造属于自己的 Vue SSR

编者按:本文由 玩弄心里的鬼 发表于掘金,已授权奇舞周刊转载 笔者最近在和小伙伴对vue项目进行ssr的升级,本文笔者将根据一个简单拿vue cli构建的客户端渲染的demo一步一步的教大家打造自己...

奇舞周刊
04/17
0
0
真正掌握vuex的使用方法(一)

导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习! ...

张培跃
05/17
0
0
从概念到实际项目__vuex指北

1,核心概念 1.1 State: 用于数据的存储,是store中的唯一数据源,类似vue中data对象. 单一状态树:用一个对象就包含了所有应用层级状态.每个应用就只包含一个store实例. 计算属性:由于Vuex的状...

suchName
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

springmvc入门之映射处理器(一)

1.简析映射处理器 在spring mvc中,使用映射处理器可以把web请求映射到正确的处理器上,spring内置了很多映射处理器,而且我们也可以自定义映射处理器。下面的实例展示spring中最常用的两个映...

明理萝
刚刚
0
1
一个破碎的人,窃机浪漫飞行后自由坠毁

简评:A sick man who needs treatment 29 岁的 Richard Russell 是西雅图机场地勤人员,上周五,在刚进入秋天的日子,他偷了一架未载客的飞机,在空中飞行独自超过一小时,甚至驾机在空中翻...

极光推送
2分钟前
0
0
linux一次性解压多个.gz或者.tar.gz文件

解压多个压缩包 对于解压多个.gz文件的,用此命令: for gz in *.gz; do gunzip $gz; done 对于解压多个.tar.gz文件的,用下面命令: for tar in *.tar.gz; do tar xvf $tar; done...

小兔纸乖乖
13分钟前
0
0
bower 安装包的使用

一,bower是什么? bower是一种包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。 它依赖于node.js和npm,如果要使用它需要先安装node.js和npm,因为node.js包含n...

nsns
15分钟前
0
0
EXCEL简易的进度条

在进度栏非常简单的进度控制,以下知道程序是否已完成。 Dim x As IntegerDim MyTimer As Double'Change this loop as needed.For x = 1 To 50' Do stuffApplication.StatusBar = ...

tedzheng
20分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部