vue bus总线 解决非父子组件通信问题

使用vue-bus有两点需要注意:
第一是 $ bus.on 应该在 created 钩子内使用,如果在mounted使用,它可能接收不到其他组件来自created钩子内发出的事件;
第二点是使用了 $ bus.on 在 beforeDestory 钩子里应该需要使用 $ bus.off解除,因为组件销毁后,就没有必要把监听的句柄存储在vue-bus里面了。

在实际的开发项目中,如果数据和业务逻辑不是特别复杂,没有必要使用Vuex,那么我们就可以通过这种方式,实现我们再实际业务逻辑中的组件间数据传递,而且代码比较简洁直观。

bus.js:

import Vue from "vue"

export default new Vue()

main.js:

import BUS from "@/utils/bus"

Vue.prototype.$bus = BUS;

A组件 引用,发出数据

this.$bus.$emit('textSearch',res)

B组件 接收

created() {
     
	let that=this
	that.$bus.$on('textSearch',(name)=>{
     
		that.textSearch(name)
	})
},
// 销毁前
beforeDestory(){
     
	this.$bus.$off('textSearch',name)
},
methods: {
     
	textSearch(searchText){
     
		let that=this
		let data={
     
			'keyword':searchText
		}
		that.$api.methods.textSearch(data, (res) => {
     
			that.getResult(res)
		})
	},
}

你可能感兴趣的:(前端)