一，不同层级组件通信（传值）

1，父组件  <--->  子组件

--- v-bind，props---：父传子

• 在渲染的子组件上使用 v-bind 绑定要传递的父组件的数据；
• 在渲染的子组件上使用 v-bind 绑定要传递的父组件的 数据；

---v-on，$emit（）---：子传父

• 在渲染的子组件标签名上使用 v-on 绑定要传递的父组件的 methods；
• 在子组件中使用  this.$emit()  调用事件名，调用的同时传递子组件的数据；

 1 
 2   

 3     :father="mesg" @get="data">
 4     
 5     
--父组件部分----
 6     
{{child}}
 7   
 8   
 9   
47 

2，获取父组件数据，获取子组件数据

---$parent，$root---：获取父组件数据，根组件数据。

---$refs  ref---：获取子组件的数据。 需要先在子组件上标记ref属性；

 1 
 2   

 3     
ref="h2data">标题
 4     ref="childdata">
 5   
 6   
 7   
42 

3，爷级组件    <---->   孙级组件

--- $attrs + $listeners---：跨爷孙级，桥接；

 1 
 2   

 3     
{{data}}
 4     :data="first" @click="get">
 5   
 6   
 7   
48 

4，跨所有级别组件通信

---provide + inject---：可跨任意层级；

 1 
 2   

 3     
爷
 4     
 5   
 6   
 7   
64 

二，同级组件通信（传值）

1，父传子，然后子在传给兄弟组件；

• 在定义好的  Vue  实例中，先父传子，然后再子传父；
• 在发送方利用 $emit(‘事件名’，数据)  来传递数据；
• 在接收方使用父传子的方法  v-on绑定 和 props  来接收数据；

2，事件总线；

• 通过新的Vue实例做中介，在子组件引入，再$emit出去，兄弟组件$on监听；

3，vuex

• new Vuex.Store，挂载到Vue.ues实例，子组件$store.state访问，改变时$store.commit出去，在store的mutation设置