Vue组件间通信实践

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，类型为 String
  message: String,
  // 定义一个名为 'age' 的 prop，类型为 Number，可选，默认值为 18
  age: {
    type: Number,
    default: 18
  },
  // 定义一个名为 'isStudent' 的 prop，类型为 Boolean
  isStudent: 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>

---

📌 联系方式

如果您对我们的项目感兴趣，或者有任何技术问题想要探讨，欢迎通过以下方式与我联系。我非常期待与您交流，共同学习，共同进步！

• 邮箱：2109664977@qq.com
• Gitee：我的Gitee
• GitHub：我的GitHub
• CSDN：我的CSDN
• 个人博客：访问我的博客

---

🎉 结语

感谢你的访问，如果你对我的技术文章或项目感兴趣，欢迎通过以上方式与我联系。让我们一起在技术的道路上不断前行！🚀

---