组件之间的通讯：兄弟组件之间的相互通讯（中央事件总线）
Posted BD_evel
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件之间的通讯：兄弟组件之间的相互通讯（中央事件总线）相关的知识，希望对你有一定的参考价值。
组件之间的通讯：
父->子:通过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.$parent.Bus.$on(\'你的名字\',value=>{ this.print(value); }); }, methods:{ print(value){ console.log(value); } }, beforeDestory(){ //this.$root.Bus.$off("你的名字");
this.$parent.Bus.$off("你的名字"); //值得说一句的是，这个$root就是$parent ，建议还是写成$parent } }; 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>
以上的例子存在一个问题就是，假如子组件被多个组件调用，那么 this.$parent.Bus.$emit(\'你的名字\',123);这句话可能会报错
尤其是在一个较复杂的项目中组件是会被进程的引用。
这时候我们可以在main.js中进行
Vue.prototype.bus = new Vue();
每一次使用时候只需要
this.bus.$emit("....",\'.....\');
一般来，中央事件总线使用来兄弟组件之间的相互通信，其实也可用于父子组件的相互通信
子组件：ratingselect.vue
toggleContent(event){ if(!event._constructed){ return ; } this.onlyContent=!this.onlyContent; this.bus.$emit(\'content.toggle\',this.onlyContent); }
父组件：good.vue
created(){ this.bus.$on(\'content.toggle\',(e)=>{ console.log(e); }); },
父子组件之间的更好通信方式：纯粹的事件派发
子组件：
this.$emit(\'modalIsShow\', this.showModal)
调用子组件的父组件：
<selfModal ref="forgetPwdModal" v-on:modalIsShow="modalIsShowLoan">
modalIsShowLoan () {
console.log("派发事件给父组件啦")
}
怎么在父组件中获悉子组件的生命周期函数：
下面的代码就是在父组件中申明子组件的created函数
<template> <child @hook:created="handelChildCreated"></child> </template> methods: { handelChildCreated () { console.log(\'this is childCreated\') } }
以上是关于组件之间的通讯：兄弟组件之间的相互通讯（中央事件总线）的主要内容，如果未能解决你的问题，请参考以下文章