vue 脚架 实现 广播 操作

创建一个广播 函数 

/* 广播 */

/**
 * 子元素向父元素发送通告
 * @param {Event} eventName 事件名字
 * @param {Oeject|Array|String} data 参数
 */
function $dispatch(eventName,data) {
    let parent = this.$parent;
    //循环查找父元素 找到没有为止
    while(parent){
        //每找到一个父元素就派发一个事件
        parent.$emit(eventName,data);
        //继续找上一个父元素
        parent = parent.$parent;
    }
}
/**
 * 父元素向子元素发送广播
 * @param {event} eventName 事件名称
 * @param {Oeject|Array|String} data 参数
 */
function boardcast(eventName,data) {
    this.$children.forEach(child => {
        //子元素派发
        child.$emit(eventName,data);
        //遍历每一个子元素派发事件
        if(child.$children.length){
            boardcast.call(child,eventName,data);
        }
    });
}

export default{
    methods:{
        $dispatch,
        $boardcast: function (eventName,data) {
            boardcast.call(this,eventName,data);
        }
    }
}

在 main.js 引入 对应的JS , 并在mixin函数中使用

import emitter from './until/js/emitter.js'
let methods = {
	post(url,data){
		return this.$fetch.post(url,data,this);
	},
	...emitter.methods,
};
Vue.mixin({
	methods:{
		...methods,
	}
})

在需要的页面上加入监听

/* 监听登录广播 */
		this.$on('方法名称', res => {
			console.log(res, '传递参数');
			
		});

发送广播

// 父级页面向子集页面发送广播
this.$boardcast('广播事件名字','参数');
// 子级页面向父集页面发送广播
this.$dispatch('广播事件名字','参数');

 到此，在需要的页面添加监听  在需要发送的广播添加广播就可以了