全局事件总线 GlobalEventBus

文章介绍了在Vue.js应用程序中,如何通过创建和使用全局事件总线($bus)来实现组件间的通信。首先在main.js中安装事件总线,然后在需要发送或接收数据的组件中利用$emit和$on方法进行数据传递。最后,在组件销毁时调用$off来解除事件监听,避免内存泄漏。
摘要由CSDN通过智能技术生成

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

2.安装全局事件总线:

在main.js文件中

new Vue({
  router,
  store,
  render: h => h(App),
  brforeCreate(){
    Vue.prototype.$bus=this //安装全局事件总线
  }
}).$mount('#app')

3.使用事件总线:

    1.提供数据 school组件中提供数据

 methods: {
        sendMsg(){
            this.$bus.$emit("hello",this.name)
        }
    },

  2.student组件中接收数据

  this.$bus.$on('hello',(data)=>{
          console.log("student组件,收集了数据",data);
        })

4.用完之

beforeDestroy(){
      //销毁
      this.$bus.$off('hello')
    }

后销毁

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值