什么是通信

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


 


 


 


 


 


 

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

在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架构中用的最多的一种通信方案                    。