Vue3常用的6种组件通信方式，你一定都用过！

1. props

演示效果：

Props 是 Vue 中最常见的一种父组件将数据传递给子组件的方式。

父组件：

子组件：child.vue

通俗易懂讲解：

1.在父组件中，通过 reactive 定义了响应式变量 father ，包含 name 和 age 属性。

2.父组件通过 import 导入子组件 child.vue，并在 template 中加载子组件。

3.通过 “:” 将子组件的 name 属性和父组件的 father.name 属性进行绑定，将子组件的 age 属性和父组件的 father.age 属性进行绑定，

4.父组件按钮 click 事件绑定 changeData 方法，点击按钮修改父组件变量 father 的值。

5.子组件通过 defineProps 接收父组件传递的数据。其中子组件 name 变量接收父组件 father.name 的值， 子组件 age 变量接收父组件 father.age 的值，

2. $emit

演示效果：

子组件可以使用 $emit 方法触发一个事件，父组件可以通过监听这个事件来实现组件之间的通信。

父组件

子组件

通俗易懂讲解：

1.在父组件中，通过 reactive 定义了响应式变量 father ，包含 name 和 age 属性。并通过插值表达式显示 name 和 age 的初始值。

2.父组件通过 import 导入子组件 child.vue，并在 template 中加载子组件。

3.父组件定义修改 name 和 age 属性的方法 changeData。 通过 ”@“ 将子组件要调用的 changeFatherData 方法和父组件的 changeData 方法进行绑定。

4.子组件通过 defineEmits 定义要调用的父组件的方法 changeFatherData。

5.子组件点击按钮通过 emits 调用定义的父组件方法 changeFatherData，并传递数据。

3. defineExpose 和 ref

演示效果

子组件通过 defineExpose 暴露需要共享的数据，父组件可以通过 ref 获取子组件的数据。父组件需要定义一个和子组件 ref 属性同名的变量。

父组件

子组件

通俗易懂讲解：

1.子组件定义相关的变量和方法，并通过 defineExpose 暴露相关数据。

2.父组件通过 import 导入子组件 child.vue，并在 template 中加载子组件。父组件定义 childRef 变量，通过 ref=”childRef” 绑定子组件。

3.父组件点击按钮通过 childRef 修改子组件暴露的变量和方法。

4. provide 和 inject

演示效果

父组件通过 provide 向子孙组件传递数据，子孙组件通过 inject 接收数据

父组件

子组件

通俗易懂讲解：

父组件通过 provide 向子组件传递数据，子组件通过 inject 接收数据

5. v-model

演示效果

v-model 用于在父子组件之间实现双向数据绑定。

父组件

子组件

通俗易懂讲解：

1.子组件通过 v-model:name 绑定父组件的 fatherName 变量， v-model:age 绑定父组件的 fatherAge 变量。

2.子组件通过 defineEmits 定义绑定父组件的事件。

3.子组件通过 emit 发布事件，update:name 对应 v-model:name，update:age 对应 v-model:age。也就是 v-model： 要和 update: 后面的属性名一样。

6. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。说白了就是把一些共享的数据放到 vuex 中，任何组件都可以进行使用。

安装 vuex

npm install vuex@next

在 /src/store 文件夹下新建 index.js 文件

import { createStore } from 'vuex';
export const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    incrementCount(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('incrementCount');
    }
  },
  // 计算属性
  getters: {
    getCount(state) {
      return state.count;
    }
  }
});

在 main.js 里面配置 store

演示效果

父组件或者子组件