Vue组件间通信实践

🌟 前言

欢迎来到我的小天地，这里是我记录技术点滴、分享学习心得的地方。📚

🛠️ 技能清单

编程语言：Java、C、C++、Python、Go、
前端技术：Jquery、Vue.js、React、uni-app、Echarts
UI设计: Element-ui、Antd、Color-ui
后端技术：Spring Boot、Mybatis-plus、Swagger
移动开发：Android
操作系统：Windows、Linux
开发框架：RuoYi、微信小程序
开发工具：VSCode、IDEA、Eclipse、WebStorm、HbuildX、Navicat、Xshell、Android Studio、Postman
数据库技术：MySQL、Redis、SQL Server
版本控制：Git

在Vue中，组件间的通信是构建复杂应用的关键。本教程将通过几个简单的例子来展示如何在Vue组件之间传递数据和方法。

defineProps和defineEmits的作用

在Vue 3中，defineProps和defineEmits是Composition API的一部分，它们用于在组件中声明props（接收来自父组件的数据）和emits（触发事件传递给父组件）。

defineProps

defineProps用于声明组件接收的props。它允许你定义一个接口，指定哪些属性将作为props传递给组件。这有助于提供类型检查和自动完成功能，使得组件的props使用更加清晰和安全。

import { defineProps } from 'vue';const props = defineProps({// 定义一个名为 'message' 的 prop，类型为 Stringmessage: String,// 定义一个名为 'age' 的 prop，类型为 Number，可选，默认值为 18age: {type: Number,default: 18},// 定义一个名为 'isStudent' 的 prop，类型为 BooleanisStudent: Boolean
});

在上面的例子中，props是一个响应式引用，你可以在组件的其他地方使用它来访问这些props。

defineEmits

defineEmits用于声明组件可以触发的事件（emits）。这允许你在组件内部定义可以被父组件监听的事件。与defineProps类似，它也提供了类型检查和自动完成的功能。

import { defineEmits } from 'vue';const emits = defineEmits({// 定义一个名为 'update:name' 的事件// 当这个事件被触发时，它将传递一个名为 'name' 的参数'update:name': (name: string) => true,// 定义一个名为 'delete' 的事件，没有参数'delete': () => true
});

在上面的例子中，emits是一个对象，它描述了组件可以触发的事件。你可以在组件内部使用emits来触发这些事件。

父子组件通信

父组件传递数据和方法给子组件

在父组件中，我们定义了一些数据和方法，并通过props传递给子组件。

<template><div><div @click="props.viewFun">***main组件***</div><hello-world:fuData="fuData":fuFunc="fuFunc"@child-event="receiveCh"></hello-world></div>
</template><script setup lang="ts">
import HelloWorld from "@/components/HelloWorld.vue";// 定义数据和方法
const fuData = "main数据";
const fuFunc = (i: any) => {console.log("main组件的方法", i);
};// 子组件触发的事件处理
const receiveCh = () => {console.log("main组件的方法被调用了");
};// 使用defineProps定义props
import { defineProps } from "vue";
const props = defineProps(["viewFun"]);
</script>

子组件调用父组件的方法

在子组件中，我们可以通过emit来触发父组件的方法。

<template><div @click="chFunc">---hello组件---</div><div @click="fuFunc(111)">{{ fuData }}</div><div>{{ viewData }}</div>
</template><script setup lang="ts">
// 使用defineProps接收父组件传递的数据和方法
import { defineProps } from "vue";
interface Props {fuData?: String;fuFunc?: Function | any;
}
defineProps<Props>();// 使用defineEmits定义子组件触发的事件
import { defineEmits } from "vue";
const emit = defineEmits(["child-event"]);
const chFunc = (data: any) => {emit("child-event", data);
};// 使用inject接收父组件通过provide注入的数据
import { inject, Ref, ref } from "vue";
const viewData = inject<Ref<number>>("view", ref(0));
</script>

跨层级组件通信

使用provide/inject

在Vue 3中，我们可以使用provide和inject来实现跨层级组件的通信。

<template><div><div>@@@页面@@@</div><main-layout :view-fun="viewFun"></main-layout></div>
</template><script setup lang="ts">
import MainLayout from "@/components/MainLayout.vue";// 在父组件中provide数据
import { provide } from "vue";
provide("view", "provide注入数据");// 在子组件中inject数据
const viewFun = () => {console.log("页面加载");
};
</script>