Vue全局事件总线_任意组件间通信

原创于 2022-02-24 17:18:36 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中实现组件间的通信，通过创建全局事件总线($bus)来传递数据。首先，在Vue实例的beforeCreate钩子中安装$bus。然后，组件可以订阅($on)事件总线上的特定事件来接收数据，或者发布($emit)事件来提供数据。这种方法为不直接相关的组件提供了一种解耦的通信方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局事件总线 —— 任意组件间通信

实现一个中介。

1.安装全局事件总线

new Vue({
  el:'#app',
  //将App组件放入容器中
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this		//安装 $bus计算当前应用的vm
  }
})

2.使用事件总线

①接收数据：A组件接收数据，则在A组件给$bus绑定自定义事件，事件的回调留在A组件自身

methods(){
	demo(data){}
},
mounted(){
	this.$bus.$on('xxxx',this.demo)
}

或

mounted(){
	this.$bus.$on('xxxx',(data)=>{
		....
	})
}

②提供数据

methods:{
	ssss(){
		this.$bus.$emit('xxxx',数据)
	}
}