Vue的全局事件总线(GlobalEventBus)

2022-08-01 08:35:26

一、定义

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

二、安装全局事件总线

new Vue({

    el: '#app',

    render: h => h(App),

    beforeCreate() {

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

    }

})

三、使用事件总线

1. 接收数据

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

methods(){
    demo(data){......}    //提前配置好 demo 函数
}
......
mounted(){
    this.$bus.$on('xxx',this.demo)   //绑定自定事件时,回调要么配置在 methods中,要么用箭头函数,否则 this 指向会出问题

    this.$bus.$on('xxx',(data)=>{  console.log('收到的数据:'+data)  })   //箭头函数的写法

2. 提供数据

B组件把数据传给A组件,this.$bus.$emit('xxxx',数据)

 sendStudentName(){

        this.$bus.$emit('xxx',this.name)   //将数据传给A组件

      }

备注:此处的xxx是自定义事件的名称

四、 销毁自定义事件

在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。

beforeDestroy() { this.$bus.$off('nihao') },

  • 作者:欢乐多~
  • 原文链接:https://blog.csdn.net/lql19970816/article/details/125010297
    更新时间:2022-08-01 08:35:26