兄弟组件通信--中央事件总线 vue bus 的使用

2024-01-02 18:12:51

🤞兄弟组件之间通信,除了可以使用公共状态仓库vuex之外,还可以使用中央事件总线vue bus进行数据的传值,使用时需要注意,在使用$on的组件中需要在组件销毁时将监听也一并销毁掉,这样做一方面优化性能和内存,一方面避免了一次发布消息,多次监听的情况。

🤞在本次的学习中,我发现一个特别好玩的情况,假设,第一次在a组件中发布消息, b组件中无法通过监听获取消息,当第二次在a组件中发布消息时,b组件可以监听到。 在这里存在疑问😥😥,成长的路上少不了大神和同行的相助,希望在评论区能留下您宝贵的足迹,不甚感激😁😁。

以下有四种使用方法可供参考

👉方法1:创建一个bus.js文件,使用一个空的Vue实例作为中央事件总线,最后引入到组件中

// bus.js
import Vue from 'vue';
const bus = new Vue();
export default bus;

// 组件中使用
// a组件
bus.$emit('getMessage',value)
// b组件
bus.$on('getMessage',this.showMsg)
showMessage (value) { 
  console.log('msg', value)
}
destoryed () {
  this.$off('getMessage', this.showMessage)
}

👉方法2:在全局文件main.js中,手动将事件总线bus定义在vue的原型对象上,这样全局都可以使用

// main.js
const bus = new Vue()
Vue.prototype.$bus = bus
// 组件中使用
this.$bus.on()
this.$bus.$emit()
this.$bus.$off()

👉方法3:使用插件vue-bus


// 安装,引入 
npm install vue-bus --save
// vue-bus自动作用于全局
import VueBus from 'vue-bus'; 
Vue.use(VueBus)

// 使用方法同方法2
// 组件中使用
this.$bus.on()
this.$bus.$emit()
this.$bus.$off()


👉方法4:引入封装好的EventEmitter.js

这里想要封装好的EventEmitter.js文件的,请在评论区私信偶~~😜

// a 组件

import EventEmitter from "@/utils/EventEmitter";
	export default{
	   created(){
		   EventEmitter.emit('loadFormData',value)
	   },
	   data(){
		   return {
			   value:1
		   }
	   }
}



// b组件

import EventEmitter from "@/utils/EventEmitter";
export default{
   created(){
		EventEmitter.on('loadFormData',this.loadFormData)
   },
   data(){
	   return{
		  fullScreenValue:'' 
	   }
   }
   methods:{
	   loadFormData(value){
		   this.fullScreenValue = value
	   }
   },
   // 监听事件需要在组件销毁时删除
	destroyed() {
		   EventEmitter.removeListener("loadFormData", this.fullScreen);
	   }
}

文章来源:https://blog.csdn.net/Code_King006/article/details/135342945
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。