Vue组件之间的6种通信方式

在学习Vue的过程中，Vue组件之间的通信是不得不了解的，在实际开发中也是非常常用的，所以这里我总结了Vue组件的6种通信方式，希望能帮助朋友更好更快的理解Vue组件之间的通信是父子关系B和E是父子关系B和C是兄弟关系D和E是堂兄弟关系A和D是代际关系关系A和E是代际关系从上面的关系预览下面的场景：父子组件之间的数据传递兄弟组件之间的数据传递祖先组件和子组件之间的数据传递下面我详细解释一下实现这些关系的几种通信方式props/$emit$parent/$childrenandref$emit/$onvuex$attrs/$listenersprovide/inject几种组件通信方式ter选择当我们的项目比较大的时候，我们可以选择一个比较好的状态管理方案vuex。谨慎使用$parent和$children。它们的主要目的是作为访问组件的紧急方法。更推荐使用props和events来实现父子组件通信。如果只想传递数据，请使用$attrs/$listeners。如何既传递数据，又做中间处理，使用vuex使用一些方法1：props/$emit父组件A通过props的方法传递数据给子组件B子组件B通过props传递数据给父组件Aemit父组件向子组件传递数据如下一个例子看看父组件是如何向子组件传递数据的：这个例子是子组件son.vue通过props获取父组件father.vue中的数据：sonList:['小白','小红','小蓝','小绿']父父组件子组件son.vue注意：props只能从上层组件传给下层组件，也就是父子组件，也就是这个单向数据流属性是只读的，不能修改。所有修改都将失效并被警告。子组件将数据传递给父组件。下面用一个例子来看看子组件是如何给父组件传值的：这个例子是Subcomponentson。Vue将$emit传递给父组件值父组件father.vueexportdefault{props:['sons'],methods:{emitIndex(index){this.$emit('onEmitIndex',index)}}}方法2：$parent/$children和ref子实例可以使用this.$parent来访问父实例。子实例被压入父实例的$childrenref：如果用在普通DOM元素上，则引用指向DOM元素；ifUsedonsubcomponents，引用指向组件实例这里我想说的是：use$paresparinglynt和$children，主要目的是作为访问组件的应急手段，推荐使用props和events来实现父子组件通信下面用一个例子来说明$parent和$children的用法：父组件father.vue子组件son.vue下面说说ref访问组件的例子：subcomponentexportdefault{data(){return{title:'Vue.js'}},methods:{sayHello(){window.alert('你好');}}}父组件注意：这两种方法的缺点是$emit不能在跨域的兄弟/$on之间进行通信，父子、代际、兄弟组件通信都可以使用这种方法。该方法使用App.vue这样的实例作为模块的事件中心，通过它来触发事件和监听事件，从而实现任意组件之间的通信，包括亲子、代际和兄弟姐妹组成部分。当项目比较大的时候，可以选择比较好的状态管理方案vuex。下面通过一个例子来说明emit/on的用法：这里先说一下：有两个组件A，B，要在B组件中接收来自A组件的数据，首先新建一个Vue根实例，然后我们通过$emit在A组件中定义一个自定义的事件方法，然后通过$on接收A组件自定义事件传递的值，首先创建一个空白的vue实例importVuefrom'vue'exportdefaultnewVue()子组件A通过$emit子组件B组件B通过$on自定义方法监听aevent父组件这个父组件就是把A和B两个组件放在父组件中进行注册和渲染>Vuex什么是Vuex？Vuex是专门为Vue.js应用开发的状态管理模型。它解决了组件之间共享相同状态的问题。它使用集中存储来管理应用程序所有组件的状态，因此组件可以与stort进行通信。实际上，Vuex是一个用来管理组件间通信的组件。为什么要使用Vuex？如果不使用vuex，父子组件依赖同一个状态。相当于当前模块状态的计算属性突变。如果要更新state中的字段，只能提交mutations中定义的事件（key是事件名，value是函数），但是中文事件函数必须同步执行。定义一个异步函数，在回调中提交mutation，相当于异步更新state中的fieldmodules，类似于命名空间。用于在项目中单独定义和操作各个模块的状态，方便维护Vuex实例应用父组件子组件ChildA子组件ChildBimportChild1from'./Child1.vue';exportdefault{data(){return{};},组件:{Child1},方法:{onTest1(){console.log('test1running...');},onTest2(){console.log('test2running');}}};B组件C组件provide/inject在祖先组件中通过provider提供变量，然后在孙子组件中注入变量procide/injectAPI主要解决跨域组件之间的通信问题，但其使用场景主要是子组件获取上层组件的状态，跨层组件之间建立一种主动提供和依赖注入。下面用一个例子来说明provide/inject的用法：parentcomponentexportdefault{name:'grandson',inject:[name]}这里可以通过inject直接访问两层以上的数据，用法和props完全一样。总结vue组件之间的通信大致可以分为三种父子通信：props/emit,parent/children,attrs/$listeners,provide/injectAPI,refparenttochild通过props传递数据childtoparent传递通过$emit,event子实例通过$parent父实例访问子实例通过$children$attrs将数据从父组件传递给子组件或孙组件（包括无法识别的功能绑定（类和样式除外）（并获得）作为父作用域中的道具）监听器使用父组件将数据传递给包含父作用域的子组件或孙子组件（没有.native修饰组件）v-on事件监听器祖先组件通过以下方式向后代组件提供变量provider，后代组件通过inject向祖先组件注入变量Ref用于访问组件实例Siblingcommunicvuex用作兄弟之间的通信和跨层级通信Vuex,attrs/listeners,provide/injectAPIvuex用作兄弟间通信和跨层$attrs使用父组件向子组件或孙组件传递数据（包括那些在父范围内不被识别为props（并获得）特性绑定（类和样式除外）的监听器使用父组件将数据传递给子组件或孙组件包含父范围（不包括.nativedecorator)v-on事件监听器祖先组件通过provider为后代组件提供变量后代组件通过inject为祖先组件注入变量最后，如果本文对您有帮助，请为本文点赞??????欢迎大家加入，一起学习前端，一起进步！