什么是通信

通信是组件或模块之间的数据交互  
  
  
  
  
  
  
  
，多重通信就形成了数据流 
  
  
  
  
  
  
  
 ，数据流管理的优劣决定了产品能否上线


 


 


 


 


 


 


 


 ，数据流（通信）越混乱 
 
 
 
 
 
 
 
，代码越难维护  
  
  
  
  
  
  
  
。

在Vue中常见的通信方式

父子组件通信

父传子使用自定义属性(props)  
   
   
   
   
   
   
   
 ，子传父使用自定义事件（$emit()） 
  
  
  
  
  
  
  
 。

状态提示

当兄弟组件之间需要共享数据时

 

 

 

 

 

 

 

 ，我们通常的做法是把这个数据定义它们的共同父组件中
 

 

 

 

 

 

 

 
，在通过自定义属性实现数据共享


 


 


 


 


 


 


 


 。

provide/inject

这是组件树中                ，自上而下的一种数据通信方案
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，也就是只能父组件向后代组件传递 
 
 
 
 
 
 
 
。需要注意的是：当provide提供动态数据（声明式变量）时















，动态数据发生变化                        ，后代组件不会自动更新  
   
   
   
   
   
   
   
 。

ref

ref是vue中一个内置属性
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，每一个html元素或组件都有这个属性























，ref作用在组件上得到组件实例

 

 

 

 

 

 

 

 。使用ref访问组件实例                ，进一步可以访问组件中的数据和方法
 

 

 

 

 

 

 

 
。（说明：ref是一种快速的DOM访问方式
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，当然ref可以作用在组件上得到组件实例















，这些ref得到的DOM实例或组件实例  
  
  
  
  
  
  
  
，使用this.$refs来访问）

插槽通信

借助<slot>组件实现从子组件向父组件传递数据 
  
  
  
  
  
  
  
 ，借助this.$slots访问访问父组件中的插槽实例


 


 


 


 


 


 


 


 ，在自定义组件使用this.$slots访问父组件的插槽实例；在父组件插槽中使用#default=‘scopet’访问子组件<slot>回传的数据

$parent/$children

借助$parent/$children可以实现在任一组件中访问组件树中的其它任意组件实例 
 
 
 
 
 
 
 
，可以做到在组件中随意穿梭                。（$parent表示当前组件父组件实例  
   
   
   
   
   
   
   
 ，$children表示当前组件的子组件）

$attrs/$listteners

借助$attrs可以访问父组件传递过来的自定义属性（除class和style外）借助$listenrs可以访问父组件给的自定义事件

 

 

 

 

 

 

 

 ，在某些场景下
 

 

 

 

 

 

 

 
，$attrs与$listeners可以替代props/$emit()这种通信方案
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 。

事件总线

借助vue内置的事件系统（$on/$emit()/$off/$once）实现“订阅-发布  
  
  
  
  
  
  
  
”通信                ，这种通信方式是一种与组件层级无关的“一对多 
  
  
  
  
  
  
  
 ”的通信















。

vuex通信

是vue架构中终极通信方案
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，也是vue架构中用的最多的一种通信方案                        。