vue2 broadcast和dispatch的理解
阿新 • • 發佈:2017-12-31
child 方式 名稱 efault one event patch 使用遞歸 ons
/* 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); } } };
vue2 broadcast和dispatch的理解