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