Vue如何实现类似Vuex的broadcast和dispatch功能？

本文共计738个文字，预计阅读时间需要3分钟。

这篇内容主要介绍学习Vue组件精讲的小册子，记录以下要点，避免遗忘：

1. Mixins（混入）是Vue中的一种组件间代码共享的方式。

2.我理解的Mixins就是共享，就像面向对象中的原型模式一样。

3.Mixins与原型模式有相似之处，都是实现代码共享。

这篇内容主要是学习掘金小册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

//从外层向内层 functionbroadcast(componentName,eventName,params){ this.$children.forEach(child=>{ constname=child.$options.name; if(name===componentName) { child.$emit.call(child,eventName,params) }else { broadcast.call(child,componentName,eventName,params) } }); } exportdefault{ data(){ return{} }, methods:{ dispatch(conponentName,eventName,params){ letparent=this.$parent||this.$root; letname=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的父组件

//🌵组件A <template> <divclass="main"> <buttonclass="btn"@click="handleClick">父组件A---触发事件</button> <B></B> </div> </template> <script> importBfrom'../B'; importemitterfrom'@/minixs/emitter'; exportdefault{ name:'A', data(){ return{}; }, //测试dispatch created(){ this.$on('on-message',this.showMessage); }, mixins:[emitter], components:{ B, }, methods:{ //broadcast测试 handleClick(){ this.broadcast('B','on-click','HelloVue.js'); }, showMessage(msg){ alert(msg); }, }, }; </script>

<template> <divclass="b"> 我是子组件B <button@click="dispatchtest">dispatch发射~！🚀</button> </div> </template> <script> importemitterfrom'@/minixs/emitter'; exportdefault{ name:"B", mixins:[emitter], created(){ this.$on('on-click',this.showMessage); }, methods:{ showMessage(text){ window.alert(text); }, //dispatch派发测试 dispatchtest(){ this.dispatch("A","on-message","我就是全宇宙最善良的仔~！") } } } </script>

效果图：

以上就是Vue实现boradcast和dispatch的示例的详细内容，更多关于Vue实现boradcast和dispatch的资料请关注易盾网络其它相关文章！