本文共 2298 字,大约阅读时间需要 7 分钟。
最近学了Vue
2.0,写写自己的一点总结,关于父子组件通信的,这点对于我来说,是看文档的时候比较难理解的。通过网上找资料和实践,也有一点理解。
例子使用以下代码模板
{
{total}}
当子组件需要父组件传递的数据时,子组件要设置props
,来接收父组件传递过去的值。
在这里父组件传递的是total
,子组件设置props
是[numA,numS]
,接着在调用子组件的时候将父组件的数据传递过去,如下
这样就可以子组件'child'就能接收到父组件(也就是挂载在 app
上的)的数据。
关于props的写法有多种,具体请看
有时候我们想实现父组件的数据能动态的传递给子组件,使用v-model
来实现
...props: { numA: [String, Number]}
有时候我们想要实现子组件调用父组件,那要怎么做呢?
我们可以通过触发事件来通知父组件改变数据。
父组件:
methods: { incrementTotal() { this.total +=1 }}//监听子组件触发的add事件,然后调用incrementTotal方法
子组件:
components:{ 'child' :{ template:'#myChild', data : function(){ return{ counter : 0 } }, props:['numA','numS'], methods:{ add : function(){ this.counter +=1 this.$emit('add') //子组件通过 $emit触发父组件的方法add } } }}
子组件执行add方法 => 触发$emit => 触发父组件add方法 => 执行 incrementTotal 方法 => 完成
通过给子组件设置ref
,可以很方便的获取到子组件,然后改变子组件。
new Vue({ el:'#app', data :{ total: 0 }, methods:{ incrementTotal : function(){ this.total += 1 }, clickref:function(){ let childRef = this.$refs.childTest //获取子组件 childRef.counter = 1221 //改变子组件的数据 childRef.add(11) //调用子组件的方法 } }, components:{ 'child' :{ template:'#myChild', data : function(){ return{ counter : 0 } }, props:['numA','numS'], methods:{ add : function(num){ this.counter +=1 this.$emit('add') console.log('接收父组件的值':+ num) } } } }});
如果2个组件不是父子组件那么如何通信呢?
这时可以通过eventHub来实现通信,
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。(或者使用vuex)
let eventHub = new Vue(); //创建事件中心
组件1触发:
methods: { eve() { eventHub.$emit('change','hehe'); //eventHub触发事件 }}
组件2接收:
created() { eventHub.$on('change', () => { //eventHub接收事件 this.msg = 'hehe'; });}
这样就实现了非父子组件之间的通信了,原理就是把Hub当作一个中转站!
例子代码:
参考:
转载地址:http://wqhni.baihongyu.com/