vue组件通信 vue bus方面的总结

vue bus通常使用在兄弟与兄弟组件之间

然后在组件中，可以使用emit  on,  $off分别来分发，监听，取消监听事件  这里的$off可以取消多次使用$bus监听的事件

使用用法1：引入vue  import Vue from 'vue'2：在main.js中引入vue bus      import Bus from '***/***/bus';   Vue.prototype.$bus = Bus3：使用方法   this.$bus.$emit("Page",value); //很像父子之间传值的方法4：接收     this.$bus.$on("Page", v =>{   //vaPage传的时候的key是什么接收就必须是什么console.log(v);   //v是传来的值，可以接收多个参数})5：总结使用$bus的时候在接受bus的组件中别忘了再beforDestroy函数中销毁bus，不销毁的话会一值  叠加的调用这个方法：beforDestroy（）{this.$bus.$off("vaPage");  //当这个组件销毁的时候bus也跟着一起销毁}

 实战案例 

<template><div class="email"> <button @click="handleClick">click me</button></div>
</template><script>
export default {methods: {handleClick(){this.$bus.$emit("on-click","hello");}},
}
</script>

<template><div class="tel"><p>{{ message }}</p></div>
</template><script>
export default {data(){return{message:""}},mounted() {this.$bus.$on("on-click", msg=>{this.message = msg})},
}
</script>