详解Vue3常用的6种组件通信方式
作者：知否技术
1. props
演示效果：
Props 是 Vue 中最常见的一种父组件将数据传递给子组件的方式。
父组件：
<template>
<div>
<el-button type="primary" @click="changeData">修改信息</el-button>
<el-divider></el-divider>
<!-- 2.加载子组件 -->
<child :name="father.name" :age="father.age"></child>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import child from "./components/child.vue";
// 1.父组件数据
let father = reactive({
name: "杰克",
age: 99,
});
// 3.修改数据
const changeData = () => {
father.name = "知否技术";
father.age = 199;
};
</script>
子组件：child.vue
<template>
<div>
<div>父亲姓名：{{ props.name }}</div>
<div>父亲年龄：{{ props.age }}</div>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive } from "vue";
// defineProps 无需定义即可使用，用来接收父组件传递的数据
const props = defineProps({
name: {
type: String,
default: "",
},
age: {
type: Number,
default: 100,
},
});
</script>
通俗易懂讲解：
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 方法触发一个事件，父组件可以通过监听这个事件来实现组件之间的通信。
父组件
<template>
<div>
<!-- 加载子组件 -->
<child @changeFatherData="changeData"></child>
<el-divider></el-divider>
<div>父亲姓名：{{ father.name }}</div>
<div>父亲年龄：{{ father.age }}</div>
</div>
</template>
<script setup>
// 导入子组件
import child from "./components/child.vue";
import { ref, reactive } from "vue";
// 父组件数据
let father = reactive({
name: "杰克",
age: 99,
});
// 修改数据
const changeData = (data) => {
father.name = data.name;
father.age = data.age;
};
</script>
子组件
<template>
<div>
<el-button type="danger" @click="changeCurrentData">修改父组件数据</el-button>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive } from "vue";
// 定义要调用父组件的方法
const emits = defineEmits(["changeFatherData"]);
// 修改父组件数据
const changeCurrentData = () => {
emits("changeFatherData", { name: "知否技术", age: 299 });
};
</script>
通俗易懂讲解：
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 属性同名的变量。
父组件
<template>
<div>
<!-- 加载子组件 -->
<child ref="childRef"></child>
<!-- 点击修改子组件数据 -->
<el-divider></el-divider>
<el-button type="primary" @click="changeChildData">修改子组件数据</el-button>
</div>
</template>
<script setup>
// 导入子组件
import child from "./components/child.vue";
import { ref, reactive } from "vue";
// 绑定子组件
const childRef = ref(null);
// 修改子组件数据
const changeChildData = (data) => {
childRef.value.child.name = "知否君";
childRef.value.child.age = 20;
childRef.value.changeTitle("关注公众号知否技术,学技术不迷路！");
};
</script>
子组件
<template>
<div>
<el-alert style="width: 30%" :title="title" type="error" effect="dark" />
<el-divider></el-divider>
<div>姓名：{{ child.name }}</div>
<div>年龄：{{ child.age }}</div>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive } from "vue";
// 儿子信息
const child = reactive({
name: "李白",
age: 60,
});
// 标题
const title = ref("学点技术，涨点知识！");
// 修改标题
const changeTitle = (value) => (title.value = value);
// 子组件暴露的数据
defineExpose({ child, changeTitle });
</script>
通俗易懂讲解：
1.子组件定义相关的变量和方法，并通过 defineExpose 暴露相关数据。
2.父组件通过 import 导入子组件 child.vue，并在 template 中加载子组件。父组件定义 childRef 变量，通过 ref="childRef" 绑定子组件。
3.父组件点击按钮通过 childRef 修改子组件暴露的变量和方法。
4. provide 和 inject
演示效果
父组件通过 provide 向子孙组件传递数据，子孙组件通过 inject 接收数据
父组件
<template>
<div>
<!-- 加载子组件 -->
<child ref="childRef"></child>
</div>
</template>
<script setup>
// 导入子组件
import child from "./components/child.vue";
import { ref, reactive, provide } from "vue";
// 传递数据
provide("name", "知否君");
provide("age", 12);
</script>
子组件
<template>
<div>
<div>姓名：{{ name }}</div>
<div>年龄：{{ age }}</div>
</div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive, inject } from "vue";
const name = inject("name");
const age = inject("age");
</script>
通俗易懂讲解：
父组件通过 provide 向子组件传递数据，子组件通过 inject 接收数据
5. v-model
演示效果
v-model 用于在父子组件之间实现双向数据绑定。
父组件
<template>
<div>
<!-- 加载子组件 -->
<child v-model:name="fatherName" v-model:age="fatherAge"></child>
<el-divider></el-divider>
<p>姓名：{{ fatherName }}</p>
<p>年龄：{{ fatherAge }}</p>
</div>
</template>
<script setup>
// 导入子组件
import child from "./components/child.vue";
import { ref, reactive, provide } from "vue";
const fatherName = ref("李白");
const fatherAge = ref("122");
</script>
子组件
<template>
<div><el-button type="primary" @click="changeData">修改数据</el-button></div>
</template>
<script setup>
import { onBeforeMount, onMounted, onUpdated, ref, reactive, inject } from "vue";
const emit = defineEmits(["update:name", "update:age"]);
const changeData = () => {
emit("update:name", "知否技术");
emit("update:age", 20);
};
</script>
通俗易懂讲解：
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
演示效果
父组件或者子组件
<template>
<div>
<p>count: {{ count }}</p>
<el-divider></el-divider>
<el-button type="primary" @click="incrementCount">新增</el-button>
</div>
</template>
<script setup>
import { useStore } from "vuex";
import { computed } from "vue";
const store = useStore();
const count = computed(() => store.getters.getCount);
// 调用方法
const incrementCount = () => store.dispatch("increment");
</script>
以上就是详解Vue3常用的6种组件通信方式的详细内容，更多关于Vue3组件通信方式的资料请关注脚本之家其它相关文章！