[JavaScript知识库]Vue-全局事件总线

组件间通信之任意组件通信（全局事件总线）

1. 首先先有个x组件能让所有组件都能够访问得到

   • 思路：

   • 1.可以直接将需要全局访问的内容放在windows上，但是不推荐使用

   • 2.由于当每创建一个子组件时，都会生成一个全新的 Vuecomponent 所有这个x不能给Vuecomponen

   • 3.所以需要在vue的实例对象上添加vue.prototype原型，其他任何组件才可以访问到原型里的内容

   • 1>如何添加？

     （1）在创建vue后还未开始渲染页面的生命周期钩子：beforecreate钩子里放一个原型指向它本身的

     new Vue({
     

   • •  ?  el: '#app',
        ?  render: h => h(App),
        ?  beforeCreate(){
        ? ? ? ? ? ? x就是$bus
        ? ? ?  Vue.prototype.$bus = this
        ?  },
       })

   • 当自定义事件不再使用的时候，我们需要将此自定义事件销毁

     beforeDestroy(){
      ? ? this.$bus.$off('自定义事件名')
     }

     绑定自定义属性（ 这里必须要在mounted钩子里绑定 ）

     methods: {
      ? ? ? removes(){ 
      ?  },
      ?  mounted() {
      ? ?  // 绑定自定义属性
      ? ?  this.$bus.$on('removes',this.回调函数)
      ?  },

     触发自定义事件

     this.$bus.$emit('需要触发的事件名',数据)

     总结：给vue实例对象绑定原型对象$bus ; 利用这个bus就可以实现任何在App组件下的通信

     $bus

     $bus.$on

     $bus.$emit