Vue 组件的通信方式（父子通信、子父通信，非子父（ref链、bus总线)）

本文链接：https://blog.youkuaiyun.com/qq_40616529/article/details/93760204

一、为什么要进行组件通信？

组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信

二、组件的通信方式分类

父子组件通信
- 使用props实现
子父组件通信
- 通过自定义事件实现
非父子组件通信
- 通过ref链:可以实现非父子组件的通信，但是如果层级太多，就比较繁琐
- bus事件总线
多组件状态共享（多个组件共用同一个数据）(vuex)
- vuex实现

我们通过代码来具体来看一下这几种通信方式实现方式以及步骤

1、父子组件通信

通过props实现的方式,下面是一个简单完整示例

<body>
  <div id="app">
    <Father></Father>
  </div>
  
  <!--创建两个组件模板-->
  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <hr>
      <Son :aa = "money" :mask-flag = "maskFlag" :maskFlag = "maskFlag"/>
    </div>
  </template>
  
  <template id="son">
    <div>
      <h3> 这里是son组件 </h3>
      <p> 父亲给了我  {
  { aa }}  元 </p>
      <p> {
  { maskFlag }} </p>
    </div>
  </template>
</body>

<script>
Vue.component('Father',{
   
    template: '#father',
    data () {
    
      return {
   
        money: 2000,
        maskFlag: 10000000000
      }
    }
  })
  Vue.component('Son',{
   
    template: '#son',
    props: ['aa','maskFlag']          
  })

  new Vue({
   
    
  }).$mount('#app')

</script>

我们对上述示例分步说明：

实现：需要在子组件获取父组件的数据

a、在父组件的模板中将数据用单向数据绑定的姓氏，绑定在子组件身上

   <Son :aa = "money" :mask-flag = "maskFlag" :maskFlag = "maskFlag"/>
   //子组件嵌套在父组件内，v-bind单项绑定父组件的数据

b、在子组件的配置项中使用props配置项来接收这个数据，接收时，props的取值可以使用一个数组

   Vue.component('Son',{
   template: '#son',
   props: ['aa','maskFlag'] ,//通过子组件自定义属性接收绑定父组件的数据         
 })

在父子通信的例子中我们还可以发现一点，在组件的配置项中，我们定义的data数据是一个函数,而new Vue的实例中data数据是一个对象,那为什么组件中的data要定义为一个函数呢？

我们知道组件是一个独立的个体，所以它应该拥有自己的数据,这个数据应该也需是一个独立的数据;
就是说这个数据应该有独立的作用域，也就是一个独立的使用范围,这个范围就是这个组件内；
jvascript最大的特征是：函数式编程,而函数恰好提供了独立作用域。

为什么data要有返回值返回值还是一个对象？

a、因为Vue是要通过observer来观察data选项的,所以必须要有返回值.
b、Vue要通过es5的Object.difineProperty属性对对象进行getter和setter设置。

2、子父组件通信

通过自定义事件完成通信

<body>
   <div id="app">
      <Father></Father>
   </div>

   <template id="father">
      <div>
         <h3>这里是父组件</h3>
         <p>儿子给我{
  { money}} </p>
         <Son @hongbao="givemoney"></Son>
      </div>

   </template>

   <template id="son">
      <div>
         <h3>这里是子组件