Vue组件之$dispatch和$broadcast

最新推荐文章于 2024-08-22 10:14:08 发布

子月吾生

最新推荐文章于 2024-08-22 10:14:08 发布

阅读量2k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Sunday97/article/details/91443685

版权

本文介绍了Vue中$dispatch和$broadcast用于父子及嵌套父子组件通信的原理，强调它们不适用于兄弟组件通信，并提及由于此限制已被弃用。为继续使用，文章提供了一种在main.js中封装这两个方法的方法，并展示了在app.vue、son以及grandson组件中的应用示例。

摘要由CSDN通过智能技术生成

$ dispatch 主要是事件流由当前组件往父组件流动，当满足一定条件的时候就会触发当前子组件的监听事件，$broadcast 的功能是事件流由当前组件向子组件流动，当满足一定条件的时候就会触发当前子组件的监听事件。也就是说 $dispatch 和 $broadcast 主要解决了父子组件、嵌套父子组件的通信，但是没有解决兄弟组件的通信问题。所以后面被遗弃了。
如果要用这两个方法的话，就先在主js文件即main.js文件里面自己封装一下这两个方法，然后就可以在组件里面直接拿来用。封装好的如下：

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

//封装$dispatch函数
Vue.prototype.$dipatch = function(eventName,data) {
	//向上传递，一直不停的获取$parent
	let parent = this.parent//this是当前所在组件的vue实例，先获取到当前组件的父组件
	while(parent) {//判断是否存在父组件
		parent.$emit(eventName,data);
		parent = parent.$parent
	}
}

//封装$broadcast函数
Vue.prototype.$broadcast = function() {
	boradcast.call(this.eventName,data)
}
function broadcast(eventName,data) {
	this.$children.forEach(child => {
		child.$emit(eventName,data);