Vue组件间通信详解

    众所周知，组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件之间如何通信呢？主要有，props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和provide/inject，本文将分别介绍组件间的通信方式。

image.png

上图表示了组件之间所有可能的关系
A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）

第一种 props/$emit，适用于父子组件之间的通信

  
    
    
    
    
  
  
    

      
组件间的通信(父子组件之间的通信props和$emit)
      
    
  
  
  

注意：在组件间通行过程中，Vue组件遵循单向数据流原则：就是数据只能通过 props 由父组件流向子组件，而子组件并不能通过修改 props 传过来的数据修改父组件的相应状态。原因是：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

运行结果

image.png

第二种，$attrs 和 $listeners，适用于后代组件的通信

• $attrs：包含了父作用域中不被prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定属性 (class和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

  
    
    
    
    
  
  
    

      
组件间的通信(父组件和后代之间的通信$attrs和$listeners)
      
    
  
  
  

运行结果

image.png

第三种：事件总线方式，在项目规模不大的情况下，完全可以使用中央事件总线 的方式,中央事件总线 EventBus 非常简单，就是任意组件和组件之间打交道，没有多余的业务逻辑，只需要在状态变化组件触发一个事件，然后在处理逻辑组件监听该事件就可以。

image.png

第四种，provide 和 inject，适用于根组件和后代组件通信

在父组件中通过 provider 来提供属性，然后在子组件中通过 inject 来注入变量。不论子组件有多深，只要调用了 inject 那么就可以注入在 provider 中提供的数据，而不是局限于只能从当前父组件的 prop 属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

image.png

第五种 v-model,适用于父子组件的通信

v-model用于父子组件之间的通信，体现的是v-model的实现原理：绑定value，监听input事件。

image.png

第六种 $parent和$children，适用于父子组件之间的通信

image.png

第七种 Vuex,全局状态管理，这里暂不做介绍。详情请看Vuex