/**
* @param {*} componentName
* @param {*} eventName
* @param {*} params
* @param {*} once 通知到一个就不找了
*/
export function broadcast(componentName, eventName, params, once = false) {
for (let i = 0; i < this.$children.length; i++) {
const child = this.$children[i];
var name = child.$options.name;
if (name === componentName) {
child.$emit.apply(child, [eventName, params]);
if (once) {
break;
}
} else {
broadcast.apply(child, [componentName, eventName, params, once]);
}
}
}
export function dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root;
var name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.componentName;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
}
export default {
methods: {
// 给上层通知
dispatch(componentName, eventName, params, once = false) {
dispatch.call(this, componentName, eventName, params, once);
},
// 给下层通知
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
父的name为:Home
子的name为:SlideBox3
向下层通知
父组件中使用:
// 引入或做为mixins
import * as emitter from '@/utils/emitter' // 上面代码那个文件
/*
使用: emitter.broadcast.call(当前作用域, 子元素的name, 通知子元素的事件名, 给子元素的参数, 通知到一个就结束)
*/
emitter.broadcast.call(this, "SlideBox3", "onSlideLeave", params, true)
子组件中使用(监听):
// this.$on(该名称要和父通知事件保持一致, 一个方法)
this.$on('onSlideLeave', () => this.drawerVisible = false) // 滑动关闭弹窗
向上层通知
父组件中使用(监听):
this.$on('leaveFinish', (params) => { console.log('收到子的消息通知', params) })
子组件中使用:
// 引入或做为mixins
import * as emitter from '@/utils/emitter'
emitter.dispatch.call(this, "Home", "leaveFinish", {state: 1})
emitter代码参考elementui源码后改动部分