VUE 组件通信问题
作者:互联网
一,父到子
1.属性props。
//child
props:{msg:String}
//parent
<HelloWrold :Msg="welcome to Your Vue.js App"></HelloWorld>
2.引用$ref。
<HelloWorld ref="HW"/>
this.$refs.HW = 'xxx';
注意:在‘mounted’生命周期获取,子组件挂载完毕。生命周期‘created’,子组件不存在。
3.子元素$children。
//parent
this.$children[0].xx = 'xxx';
注意:子元素不保证顺序。
二,子到父。
自定义事件$emit,事件的派发者和监听者都是子组件。
//child
this.$emit('showMsg','value');
//parent
<HellowWorld @showMsg="smCallback"/>
methods:{
smCallback(data){
console.log(data);
}
}
三,兄弟组件通信
通过共同的祖辈搭桥,$parent或$root。
// brother1
this.$parent.$on('showMsg',handle);
//brother2
this.$parent.$emit('showMsg');
四,祖先和后代之间通信。
使用provide/inject 和data,methods同级。
// 祖代
provide(){
return {showMsg:'11'}
}
//后代
inject:['showMsg']
五,任意两个组件之间,使用事件总线bus或者vuex。
1.事件总线bus
main.js
Vue.prototype.$bus = new Vue();
//child1
this.$bus.$on('showMsg',handle);
this.$bus.$emit('showMsg',111);
2.vuex
标签:VUE,parent,bus,通信,emit,组件,data,showMsg 来源: https://www.cnblogs.com/xingqitian/p/14224906.html