Vue中8种组件通信方式，值得收藏！

之前写过一篇关于vue面试总结的文章，很多网友指出组件之间的通信方式有很多，这篇文章专门总结一下组件之间的通信通信Vue是一个数据驱动的视图更新框架，所以对于Vue来说，组件之间的数据通信非常重要，那么组件之间如何进行数据通信呢？首先我们要知道Vue中组件之间存在什么样的关系，这样更容易理解它们的通信方式，就像过年回家，坐在满屋子的陌生人里，如何调用彼此之间，那么我们需要先知道你和他们之间是一种什么样的关系。vue组件中的关系说明：如上图所示，A与B、A与C、B与D、C与E组件的父子关系；B和C之间的兄弟关系；A与D、A与ED与E的关系为表亲关系（非直系亲属）。对于以上关系，我们将其分类为：父子组件之间的通信非父子组件（兄弟组件、代际关系组件等）之间的通信本文将介绍组件间通信的8种方式，如图下图目录：并介绍了在不同的场景下如何选择一种有效的方式来实现组件间的通信，希望能帮助朋友们更好的理解组件间的通信。1.props/$emit父组件通过props向子组件传递数据，子组件可以通过$emit与父组件通信。1、父组件传值给子组件。下面举例说明父组件如何向子组件传递数据：如何获取父组件section.vue中的数据在子组件article.vuearticles:['红楼梦','西游记西','三国志']//section父组件//子组件article.vue总结：prop只能从上层组件传递给下层组件（parent-子组件），也就是所谓的单向数据流。而且prop是只读的，不能修改。所有修改均无效，并发出警告。2.子组件传值给父组件我自己对$emit的理解是这样的：$emit绑定了一个自定义事件，执行这条语句的时候，会把参数arg传给父组件，父组件通过v-on监听并接收参数。通过一个例子，说明子组件是如何向父组件传递数据的。在上一个例子的基础上，点击页面渲染的文章的item，父组件中数组显示的下标//在父组件2.$children/$parent上图是vue官方的解释。您可以通过$parent和$children访问组件的实例。实例代表什么？表示访问该组件的所有方法和数据。接下来就是如何实现指定组件的实例了。如何使用////在子组件注意边界条件，比如在#app上获取$parent在newVue()的实例中，在这个实例上取$parent将得到undefined，而在底部子组件中取$children是一个空数组。另外注意$parent和$children的值是不一样的。$children的值是一个数组，而$parent是一个对象。总结以上两种父子组件间通信的方式，使用props进行父子组件通信更为常见；两者都不能用于非父子组件之间的通信。3.provide/inject的概念：provide/inject是vue2.2.0新增的api。简单的说就是在父组件中通过provide提供变量，然后在子组件中通过inject注入。注意：这里无论子组件嵌套多深，只要调用inject，就可以注入provide中的数据，不限于从当前父组件的props属性返回数据。实例验证下面用实例验证上面的描述：假设有三个组件：A.vue,B.vue,C.vue其中C是B的子组件，B是A的子组件//A.vue//B.vue//C.vue<模板>

4.ref/refsref：如果用在普通DOM元素上，则引用指向DOM元素；如果它用在子组件上，则引用指向组件实例。可以直接调用组件的方法，也可以通过实例访问数据。让我们看一个访问组件的ref的例子：//subcomponentA.vueexportdefault{data(){return{name:'Vue.js'}},methods:{sayHello(){console.log('hello')}}}//父组件app.vue五、eventBuseeventBus又称为事件总线，在Vue中可以作为一个沟通桥梁的概念，就像所有的组件共享同一个事件中心，可以注册发送事件或接收事件，以便组件可以通知其他组件eventBus也不方便。当项目很大时，很容易造成难以维护的灾难。Vue项目中如何使用eventBus实现组件间的数据通信？具体来说，通过以下步骤1.初始化首先需要创建一个Export事件总线，以便其他模块可以使用或者监听。//event-bus.jsimportVuefrom'vue'exportconstEventBus=newVue()2。发送事件假设你有两个组件：additionNum和showNum，这两个组件可以是兄弟组件，也可以是父子组件；这里以兄弟组件为例：//additionNum.vue在3.接收事件//showNum.vue接收事件这样在组件addtionNum.vue中点击addition按钮，在showNum中使用transfer.vue中的num显示求和的结果。4.移除事件监听器如果你想移除事件监听器，你可以这样做：import{eventBus}from'event-bus.js'EventBus.$off('addition',{})6.Vuex1。Vuex简介Vuex是专门为Vue.js应用开发的状态管理模型它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex解决了多个视图依赖同一个状态，不同视图的行为需要改变同一个状态的问题2.Vuex各个模块的状态：用于数据存储，是store中唯一的数据源getter：如vue中的计算相同的属性，基于状态数据的二次封装，常用于多个数据突变的数据筛选和关联计算：类似于函数，改变状态数据的唯一方式，不能用于处理异步事件是用于提交突变来改变状态而不是直接改变状态。可以包含任意异步操作模块：类似于命名空间，用于在项目中分别定义和操作各个模块的状态，便于维护。3.Vuex实例应用//父组件//子组件childA//subcomponentchildBvuexstore,jsimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststate={//初始化A和The组件B的数据等待获取AMsg:'',BMsg:''}constmutations={receiveAMsg(state,payload){//将组件A的数据存入statestate.AMsg=payload.AMsg},receiveBMsg(state,payload){//将B组件的数据存放在statestate.BMs中g=payload.BMsg}}exportdefaultnewVuex.Store({state,mutations})7、localStorage/sessionStorage的通信比较简单，缺点是数据和状态比较混乱，不易维护。通过window.localStorage.getItem(key)获取数据，通过window.localStorage.setItem(key,value)存储数据。注意JSON.parse()/JSON.stringify()是用来进行数据格式转换的。LocalStorage/sessionStorage可以结合vuex实现持久化数据存储。同时利用vuex解决数据和状态混淆的问题。八个$attrs和$listeners现在让我们讨论一种情况。在我们一开始给出的组件关系图中，组件A和组件D是跨代的。那么他们之前是怎么交流的呢？使用道具绑定进行层层信息传递。如果D组件的状态变化需要向A传递数据，则使用事件系统，使用eventBus逐级向上传递。这种情况下，还是比较适合使用的，但是遇到多人合作开发的时候，代码维护性低，可读性低。使用Vuex来进行数据管理，但是如果只是传递数据而不进行中间处理，使用Vuex处理感觉有点大材小用。在vue2.4中，为了解决这个需求，引入了$attrs和$listeners，并增加了inheritAttrs选项。在2.4版之前，默认情况下，在父范围内未被识别（和获取）为props的属性绑定（类和样式除外）将“回退”并作为普通HTML属性应用于子组件。在根元素上。接下来看一个跨层通信的例子：//app.vue//index.vue//childCom1.vue

name:{{name}}

childCom1的$attrs:{{$attrs}}

//childCom2.vue总结常见的使用场景可以分为三类：父子组件通信：props;$parent/$children;provide/inject;ref;$attrs/$listeners兄弟组件通信：eventBus;Vuex跨层通信：eventBus;Vuex;provide/inject,$attrs/$listeners今天分享了这么多，如果对分享的内容感兴趣，可以关注公众号《程序员成长指南》，或者加入技术交流群，大家一起讨论