Vue组件之$dispatch和$broadcast

$ 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);