vue官网指出,可以使用一个空vue实例作为事件中央线!
也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的),才能使用 $emit 获取 $on 的数据参数,实现组件通信 。
举个例子。
公共实例文件bus.js,作为公共数控中央总线
import Vue from "vue";
export defaultnewVue();
第一个组件 first.vue
import Bus from '../bus.js';
export default {
name: 'first',
data () {
return {
value: '我来自first.vue组件!'
}
},
methods:{
add(){// 定义add方法,并将msg通过txt传给second组件
Bus.$emit('txt',this.value);
}
}
}
export default {
name: 'first',
data () {
return {
value: '我来自first.vue组件!'
}
},
methods:{
add(){// 定义add方法,并将msg通过txt传给second组件
Bus.$emit('txt',this.value);
}
}
}
第二个组件second.vue
import Bus from '../bus.js';
export default {
name: 'second',
data () {
return {
}
},
mounted:function(){
Bus.$on('txt',function(val){//监听first组件的txt事件
console.log(val);
});
}
}
这样,就可以在第二个非父子关系的组件中,通过第三者bus.js来获取到第一个组件的value。
兄弟组件之间与父子组件之间的数据交互,两者相比较,兄弟组件之间的通信其实和子组件向父组件传值有些类似,其实他们的通信原理都是相同的,
例如子向父传值也是$emit和$on的形式,只是没有eventBus,但若我们仔细想想,此时父组件其实就充当了bus这个事件总线的角色。
有个问题,就是父子之间传值或者子父之间传值是不是都可以用这个方式?
网友评论