Created
May 22, 2020 03:29
-
-
Save fhefh2015/6898814566f6f35465f87f1ead608f7a to your computer and use it in GitHub Desktop.
vue2 broadcast和dispatch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
broadcast 事件广播 | |
@param {componentName} 组件名称 | |
@param {eventName} 事件名 | |
@param {params} 参数 | |
遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params. | |
如果没有找到 则使用递归的方式 继续查找孙组件,直到找到为止,否则继续递归查找,直到找到最后一个都没有找到为止。 | |
*/ | |
function broadcast(componentName, eventName, params) { | |
this.$children.forEach(child => { | |
const name = child.$options.name; | |
if (name === componentName) { | |
child.$emit.apply(child, [eventName].concat(params)); | |
} else { | |
broadcast.apply(child, [componentName, eventName].concat([params])); | |
} | |
}) | |
} | |
/* | |
* dispatch 查找所有父级,直到找到要找到的父组件,并在身上触发指定的事件。 | |
@param { componentName } 组件名称 | |
@param { eventName } 事件名 | |
@param { params } 参数 | |
*/ | |
export default { | |
methods: { | |
dispatch(componentName, eventName, params) { | |
let parent = this.$parent || this.$root; | |
let name = parent.$options.name; | |
while (parent && (!name || name !== componentName)) { | |
parent = parent.$parent; | |
if (parent) { | |
name = parent.$options.name; | |
} | |
} | |
if (parent) { | |
parent.$emit.apply(parent, [eventName].concat(params)); | |
} | |
}, | |
broadcast(componentName, eventName, params) { | |
broadcast.call(this, componentName, eventName, params); | |
} | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment