组件之间的通讯：
父->子:通过props,data属性，
子->父：通过派发事件
兄弟组件：中央事件总线（......data{ Bus:new Vue()}.....）
更为复杂的通讯：就是用vuex
关于兄弟组件之间的通讯官档上推荐使用中央事件总线，我们也确实是这样做的，
中央事件总线，其实就是在父组件data中在实例化话一个vue实例，用于管理组件之间的通讯
假设我们有一个组件A,和B,他们之间的要进行数据通讯，那么他们之间肯定要建立某种联系，这个联系人就是父组件，联系地址就是中央事件总线
然后A,$emit一个信息，B就$on监听这个信息
直接上上例子：
首先先建立一个父组件：
const myVue=new Vue({
el:‘#app‘,
data:{
Bus:new Vue(),//中央事件总线
},
components:{
myF1:c1,//子组件c1
myF2:c2//子组件c2
}
});
给出子组件的代码：
const c1={
template:`<div>
<p>this is c1 组件</p>
<span></span>
</div>`,
created(){//组件的钩子函数
this.$root.Bus.$on(‘你的名字‘,value=>{
this.add(value);
});
},
methods:{
add(value){
console.log(value+100);
}
},
beforeDestory(){//组件的钩子函数
this.$root.Bus.$off("你的名字");
}
};
const c2={
template:`
<div>
<p>this is c2 组件</p>
<p >
<button @click="submit">改变</button>
</p>
<span></span>
</div>`,
methods:{
submit(){
// this.$root.Bus.$emit(‘eventName‘,123);
this.$parent.Bus.$emit(‘你的名字‘,123);
},
},
};
组件B，，通过父组件的中央事件总线，$emit派发一个事件"你的名字",以及传递一个参数，兄弟组件A,通过父组件的中央事件总线$on，监听那个派发的事件，并接受那个参数。
没任何问题。。。。。。
给出代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子组件之间的通信(中央事件总线)</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<my-f1></my-f1>
<my-f2></my-f2>
</div>
</body>
</html>
<script>
const c1={
template:`<div>
<p>this is c1 组件</p>
<span></span>
</div>`,
created(){
this.$root.Bus.$on(‘你的名字‘,value=>{
this.print(value);
});
},
methods:{
print(value){
console.log(value);
}
},
beforeDestory(){
this.$root.Bus.$off("你的名字");
}
};
const c2={
template:`
<div>
<p>this is c2 组件</p>
<p >
<button @click="submit">改变</button>
</p>
<span></span>
</div>`,
methods:{
submit(){
// this.$root.Bus.$emit(‘eventName‘,123);
this.$parent.Bus.$emit(‘你的名字‘,123);
},
},
};
const myVue=new Vue({
el:‘#app‘,
data:{
Bus:new Vue(),
},
components:{
myF1:c1,
myF2:c2
}
});
</script>
时间： 2024-10-29 10:45:45