标签：事件 ima 事件总线 ted create 实例化 复杂 code tle
组件之间的通讯：
父->子:通过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>
标签：事件 ima 事件总线 ted create 实例化 复杂 code tle
原文地址：http://www.cnblogs.com/evaling/p/7349254.html
