Vue 兄弟组件之间的通信

参考:https://blog.csdn.net/weixin_39763493/article/details/107182252

1. Vue中实现兄弟组件的通讯一般为2种方式:

  1. 一种方法是让父组件允当两个子组件之间的中间件(中继)
  2. 另一种就是使用EventBus(事件总线),它允许两个子组件之间直接通讯,而不需要涉及父组件。

由于中继方式比较简单,这里不做赘述,只讲EventBus方式。

2. EventBus具体实现

  1. 首先在main.js文件中定义一个新的bus对象并且挂载在原型链上,其实他是一个全新的Vue实例:
Vue.prototype.$bus = new Vue()
  1. 兄弟组件 a.js 中,声明并监听事件 brotherEvent
created(){
	this.$bus.$on('brotherEvent', res=>{
		console.log(res) // 得到123
	})
}
  1. 兄弟组件 b.js 中,触发 $bus 中的brotherEvent
methods:{
	bAction(){
		this.$bus.$emit('brotherEvent', ’123‘)
	}
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐