通信本质上是信息的同步，Vue的组件通信，就是Vue组件间的信息共享与同步。Vue的组件通信主要分为3类

1. 父子组件通信
2. 兄弟组件通信
3. 隔代组件通信

这里说明下父子，兄弟，隔代组件定义

  <div class="home">
    <!--
      1. father 与 son 就是父子组件关系
      2. son 与 brother 就是兄弟组件关系
      3. father 与 grandSon 就是隔代组件关系
     -->
    <father>
      父组件
      <son>
        子组件
        <grandSon>孙组件</grandSon>
      </son>
      <brother>兄弟组件</brother>
    </father>
  </div>

通信方案

主要有以下几种

1. props / $emit
2. $children / $parent
3. ref / refs
4. provide / inject
5. eventBus($emit,$on)
6. $attrs / $listeners
7. Vuex

props / $emit

父组件通过props向子组件传递数据，子组件通过$emit与父组件通信。

//子组件
<template>
  <div>
    {{name}}
    <button @click="connectFather">向父组件发送数据</button>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    // 子组件通过props接收父组件数据
    props: {
      name: {
        type: String,
      },
    },
    methods: {
      connectFather() {
        // 子组件向父组件发送信息
        this.$emit('onReceiveData','the message from son')
      }
    },
  }
</script>

//父组件
<template>
  <div>
    //父组件接收来自子组件的通信
    <son name="fromFather" @onReceiveData="getData"></son>
    {{message}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getData(data) {
      this.message = data;
    },
  },
  components: {
    son: () => import('@/views/communicate/Son.vue'),
  },
};
</script>

$children / $parent

父组件通过$children访问子组件实例,返回的是一个数组，因为可能有多个子实例，子组件通过$parent访问父组件实例,返回的是一个对象。另外需要注意的是Vue3已经移除了$children。$children与$parent设计的主要目的是作为访问组件的应急办法。