22-全局事件总线

Myth丶恋晨 2023-10-08 18:16 31阅读 0赞

## **全局事件总线** ##

#### 一、全局事件总线 ####

一种组件间通信方式，适用于任意组件间通信。

#### 二、规范写法 ####

安装全局事件总线：

new Vue({
        
      // .......
      beforeCreate() {
        
        Vue.prototype.$bus = this  // 安装全局事件总线，$bus就是当前应用的vm
      },
      // .....
    })

使用事件总线：

接收数据：

mounted() {
        
        // 为$bus绑定studentNameEvent事件
        this.$bus.$on('studentNameEvent', (studentName) => {
        
            this.studentName = studentName
        });
    }

发送数据：

methods: {
        
        sendStudentName() {
        
            this.$bus.$emit('studentNameEvent', this.name)
        }
    }

最好在`beforeDestroy`钩子中，使用`$off`解绑当前组件所用到的事件。

#### 三、其他写法 ####

如果要满足任意组件间通信，需要所有组件都能拿到该对象。所以该对象可以有以下几种方式：

1.  绑定在window对象上：`window.$bus = xxxxx`
2.  绑定在VueComponent原型上。因为VueComponent原型是在源码中每次都新生成一份，所以需要修改源码
3.  绑定在Vue原型上。因为`VueComponent.prototype.__proto__ === Vue.prototype`，所以组件调用时，如果自身、自身原型都找不到这个对象，就会去Vue原型上查找。`Vue.prototype.$bus = xxxx`

极不推荐方式2修改源码。推荐使用方式3绑定在Vue原型上

该总线对象需要有`$on`、`$emit`、`$once`等相关方法，这些方法在Vue原型上，所以需要总线对象是Vue实例或者VueComponent组件实例。

如果要将总线对象定义为组件实例对象，写法为：

const BusVCClass = Vue.extend({
        });  // 通过Vue.extend创建一个组件的类对象
    const busVC = new BusVCClass();  // 实例化出一个组件对象
    Vue.prototype.$bus = busVC  // 将Vue原型上的$bus设置成组件实例对象

如果要将对象设置成Vue实例对象，则需要利用Vue的`beforeCreate`钩子函数：

new Vue({
        
      // .....
      beforeCreate() {
        
        Vue.prototype.$bus = this
      }
      // .....
    })

以上两种方式都可以正常使用，推荐使用方式2规范写法。

#### 四、其他 ####

自定义事件被触发时，在Vue的浏览器插件中切换到事件页面，可以看到触发的事件。

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**