Vue组件通信最全文章

说到Vue3组件通信，就不得不从Vue2组件通信说起。朋友们查漏补缺。先一步步看一下组件的几种用法：Vue2用法总结帮助小伙伴们加深记忆。如果对基础不是很熟悉，可以去官网看看。父子组件通信propsparenttochild$emitchildtoparentref,$refschildtoparent$parentchildtoparent$childrenparenttochild(Vue3此方法无效)多级父子组件通信provide,injectparenttochildorchildtoparent//providestatementprovide(){return{title:'I'manapp',ComApp:this,}}//注入use//使用时，可以获取到父组件的this,即ComApp,传递数据注入:['title','ComApp'],$attrs使用attributes的传递数据配合inheritAttrs使用$listeners(Vue3此方法使监听功能失效是attrs的一部分)non-关系组件通信（EventBus也叫事件总线）Vue2的EventBus://eventBus.jsconsteventBus=newVue()exportdefaulteventBus//ChildComponent.vueimporteventBusfrom'./eventBus'exportdefault{mounted(){//添加eventBus监听器eventBus.$on('custom-event',()=>{console.log('自定义事件触发red!')})},beforeDestroy(){//移除事件总线监听器eventBus.$off('custom-event')}}//ParentComponent.vueimporteventBusfrom'./eventBus'exportdefault{methods:{callGlobalCustomEvent(){eventBus.$emit('custom-event')//ChildComponent挂载时，控制台会显示一条消息}}}$在Vue3on,$off,$once方法中被完全移除。$emit仍然包含在现有API中，因为它用于触发由父组件以声明方式添加的事件处理程序。Vue3的EventBus://main.jsimportmittfrom'mitt'letapp=createApp(App)app.config.globalProperties.$myhub=newmitt()//ParentComponent.vueexportdefault{//.....methods:{getattrs(){this.$myhub.emit('myhub','我是小白龙')}}//ChildComponent.vueexportdefault{//.....mounted(){this.$myhub.on('myhub',(data)=>{console.log(data)//我是小白龙})},}总结：大多数情况下，不鼓励组件间使用全局事件总线进行通信。虽然在短期内通常是最简单的解决方案，但从长远来看，维护起来总是令人头疼。根据情况，事件总线有多种替代方案：Props和事件应该是父子组件之间通信的首选。兄弟节点可以通过它们的父节点进行通信。Provide和inject允许组件与其插槽的内容进行通信。这对于总是一起使用的紧密耦合的组件很有用。provide/inject也可以用于组件之间的远距离通信。它可以帮助避免“proppass-through”，即props需要通过多层组件向下传递，但这些组件本身可能不需要这些props。也可以通过重构使用插槽来避免Prop传递。如果中间组件不需要某些道具，则可能存在关注点分离问题。在这类组件中使用slot，可以让父节点直接为其创建内容，这样就可以直接传递props，不需要中间组件的参与。全局状态管理，例如Vuex。Vuex最好的组件通信是Vuex，但是还是有一些问题。Vuex唯一的缺点就是TypeScript的支持问题：在没有TypeScript的情况下调用state、getters、mutation、dispatch时，没有智能提示，那么多文件都能找到！！！！！！使用TypeScript后，发现这个问题解决了。但是我发现Vuex对TypeScript的Types支持并没有我想象的那么香（这里说的是Vuex4）。Vuex4虽然提供了useStore功能，但是没有像reduxforstore那样丝滑的推导体验。有人想出了一个绝妙的主意，在初始化的时候重新扩展了Vuexstore，这样就可以很好的获得TypeScript对Vuex的支持。其实Vuex团队也意识到了这个问题，在Vuex5中改变了纯函数的写法，使其可以很好的支持TypeScript。Vuex5已经到了RC阶段。这个阶段，我们可以尝试使用Pinia5。Pinia（官网）Pinia是一个轻量级的Vue.js状态管理库，最近很火。与Vuex类似，是Vue的另一种状态管理方案。Pinia支持Vue2和Vue3，更好地支持TypeScript。使用：创建Pinia并将其传递给app//usepiniaimport{createPinia}from'pinia';constapp=createApp(App)//挂在应用上functiontogettheStoreentityexportconstuseStore=defineStore({//id:必填，在所有Stores中唯一id:"myGlobalState",//state:返回一个对象的Functionstate:()=>({count:1}),});stroe用于组件空格的原因不是长篇大论在这里。感兴趣的朋友可以去官网好好看看apiVuex和Pinia的优缺点。Vuex的优点支持调试功能，例如时间旅行和编辑适用于大型、高复杂度的Vue.js项目Vuex的缺点从Vue3开始，getter的结果不像计算属性那样被缓存Vuex4有一些问题与类型安全相关Pinia的优点完整的TypeScript支持：添加TypeScript比在Vuex中添加TypeScript更容易极轻量级（大小约1KB）存储e的动作作为常规函数调用进行调度，而不是使用dispatch方法或MapAction辅助函数，这在Vuex中很常见支持多个Stores支持Vuedevtools，SSR和webpackcodesplittingPinia的缺点是不支持时间旅行和编辑等调试特性什么时候用Pinia什么时候用VuexPinea轻量级，体积小，适合中小型应用也适合低复杂度的Vue.js项目，因为有时间旅行等调试特性并且仍然不支持编辑。Vuex对于中小型Vue.js项目来说有点矫枉过正，因为它是重量级的并且对性能下降有很大的影响。因此，Vuex适用于大型、高复杂度的Vue.js项目。欢迎留言指正，坚持每天进步一点点。