16. 全局事件总线(GlobalEventBus)

  1. 一种组件间通信的方式,适用于任意组件间通信

  2. 安装全局事件总线:

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

  3. 使用事件总线:

    1. 接收数据: A组件想收到数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身

      mounted() {
    this.$bus.$on("app$on",(...params)=>{
      console.log("我是APP组件,我收到的数据: ",params);
    })
}

    2. 提供数据: this.$bus.$emit('xxx',数据)

      methods:{
    sendSchoolName(){
      this.$bus.$emit("hello",this.name)
    }
},
  4. 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
最后修改：2023 年 01 月 31 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏