Vue实现boradcast和dispatch的示例
这篇内容主要是学习掘金小册vue组件精讲的一个案例,自己做下笔记,以免日后忘记。
1.mixins(混入)
我所理解的mixins就是共享,就好比面向对象里面的原型prototype那种感觉的东西,把相同的逻辑抽离出来便于维护。
先来看下src目录结构
src ├─ components │ ├─ A │ │ └─ index.vue │ ├─ B │ │ └─ index.vue ├─ minixs │ ├─ emitter.js //这个是要混入的js ├─ store │ └─ index.js ├─ views │ └─ Home.vue ├─ App.vue └─ main.js
2.emitter.js
//从外层向内层 function broadcast(componentName,eventName,params){ this.$children.forEach(child=> { const name = child.$options.name; if(name === componentName) { child.$emit.call(child,eventName,params) }else { broadcast.call(child,componentName,eventName,params) } }); } export default { data(){ return{} }, methods: { dispatch(conponentName,eventName,params){ let parent = this.$parent || this.$root; let name = parent.$options.name; while(parent && (!name || name !==conponentName)) { parent = parent.$parent; if(parent) { name = parent.$options.name; } } if(parent) { parent.$emit.call(parent,eventName,params) } }, broadcast(componentName, eventName, params){ broadcast.call(this, componentName, eventName, params); } } }
methods里定义的dispatch和broadcast方法会被混合到组件里,自然就可以用this.dispatch和this.broadcast来使用。
这两个方法都接收了三个参数,第一个是组件的name值,用于向上或向下递归遍历来寻找对应的组件,第二个和第三个就是上文分析的自定义事件名称和要传递的数据。
可以看到,在dispatch里,通过while语句,不断向上遍历更新当前组件(即上下文为当前调用该方法的组件)的父组件实例(变量parent即为父组件实例),直到匹配到定义的componentName与某个上级组件的name选项一致时,结束循环,并在找到的组件实例上,调用$emit方法来触发自定义事件eventName。broadcast方法与之类似,只不过是向下遍历寻找。
3.具体的使用
A是B的父组件
//