Vue 3 组件间通信：通过自定义事件控制子组件显示状态

本文详细介绍了在 Vue 3 中，如何实现父组件控制子组件的显示状态，并允许子组件通过自定义事件通知父组件更新其状态（例如关闭自身）。通过实际代码示例，我们将学习如何使用 $emit 在子组件中触发事件，以及如何在父组件中监听这些事件来管理共享的响应式数据，从而实现组件间的有效交互。

在 Vue.js 应用开发中，组件化是核心思想。我们经常会遇到一个场景：父组件负责管理某个子组件的显示或隐藏状态，例如一个模态框、侧边栏或表单。父组件通过 v-if 或 v-show 绑定一个响应式变量来控制子组件的可见性。然而，当子组件内部发生某个操作（例如点击了“关闭”按钮）时，它需要通知父组件来更新这个响应式变量，从而隐藏自身。这种子组件向父组件通信的需求，在 Vue 中通常通过自定义事件（Custom Events）来实现。

问题场景分析

假设我们有以下组件结构：

• Nav.vue：导航组件，包含一个按钮用于触发显示一个表单。
• AddCountdownForm.vue：一个表单组件，初始状态由 Nav.vue 控制其显示。
• Nav.vue 中有一个 showAddCountdownForm 的 ref 变量，用于控制 AddCountdownForm.vue 的 v-show 状态。当用户点击导航栏中的“加号”图标时，showAddCountdownForm 变为 true，表单显示。
• 现在的问题是，如何在 AddCountdownForm.vue 内部点击“关闭”按钮时，通知 Nav.vue 将 showAddCountdownForm 设为 false，从而隐藏表单。

解决方案：使用自定义事件（Custom Events）

Vue 3 提供了 emit 方法，允许子组件触发自定义事件，而父组件可以通过 v-on 或 @ 语法监听这些事件。

1. 子组件触发事件

在 AddCountdownForm.vue 中，当用户点击“关闭”按钮时，我们需要触发一个事件来通知父组件。这个事件可以命名为 close。

立即学习“前端免费学习笔记（深入）”；

AddCountdownForm.vue 代码示例：

<template>
<div
class="h-screen w-full bg-gray-200/50 backdrop-blur-sm relative flex md:justify-center md:items-center"
>
<div
class="absolute h-1/2 w-full bg-gray-300 bottom-0 md:bottom-auto md:w-1/2"
>
<div class="w-full bg-white h-12 ml-0">
<!-- 当点击此处的“close”文本时，触发一个名为“close”的自定义事件 -->
<div @click="$emit('close')" class="cursor-pointer p-3">关闭</div>
</div>
<div class="p-3">表单内容</div>
</div>
</div>
</template>
<script setup>
// 如果需要，可以在这里定义组件的 emits 选项，以明确声明组件会触发哪些事件。
// 这对于代码可读性和类型检查很有帮助。
defineEmits(['close']);
</script>
<style scoped>
/* 样式代码 */
</style>

代码解释：

• 在 <div>关闭</div> 元素上，我们添加了 @click=”$emit(‘close’)”。这意味着当这个 div 被点击时，AddCountdownForm 组件将向上触发一个名为 close 的事件。
• defineEmits([‘close’]) 是 Vue 3 setup 语法糖中的一个宏，用于声明组件可以触发的事件。虽然不是强制性的，但强烈建议使用它来提高代码的可读性和维护性，尤其是在使用 TypeScript 时，它能提供更好的类型推断。

2. 父组件监听事件

在 Nav.vue 中，当渲染 AddCountdownForm 组件时，我们需要监听它触发的 close 事件，并在事件发生时更新 showAddCountdownForm 的值。

Nav.vue 代码示例：

<script setup>
import { ref } from "vue";
// import plusIcon from "../assets/plusIcon.svg"; // 假设这些图标已处理
// import dotsIcon from "../assets/dotsIcon.svg";
import AddCountdownForm from "../components/AddCountdownForm.vue";
const showAddCountdownForm = ref(false);
// 可以在这里定义一个处理函数，或者直接在模板中进行操作
const handleCloseForm = () => {
showAddCountdownForm.value = false;
};
</script>
<template>
<div class="relative">
<nav class="w-full top-0 fixed h-20 bg-gray-200 backdrop-blur-xl mb-14">
<div class="container h-full p-1 flex items-centerm justify-between">
<!-- add countdown button -->
<div
class="my-auto w-14 h-14 p-1 cursor-pointer relative transition-all"
id="addBtn"
@click="showAddCountdownForm = true"
>
<!-- <plusIcon class="fill-indigo-500 h-12 w-12" /> -->
<span class="text-indigo-500 text-3xl">+</span> <!-- 简化图标显示 -->
</div>
<!-- setting button -->
<div class="my-auto w-14 h-14 p-1 cursor-pointer relative" id="setting">
<!-- <dotsIcon class="fill-indigo-500 h-12 w-12" /> -->
<span class="text-indigo-500 text-3xl">...</span> <!-- 简化图标显示 -->
</div>
</div>
</nav>
<!-- 监听 AddCountdownForm 触发的 'close' 事件 -->
<AddCountdownForm v-show="showAddCountdownForm" @close="handleCloseForm" />
<!-- 或者更简洁地直接在模板中操作： -->
<!-- <AddCountdownForm v-show="showAddCountdownForm" @close="showAddCountdownForm = false" /> -->
</div>
</template>
<style scoped>
/* 样式代码 */
</style>

代码解释：

• 在 <AddCountdownForm> 组件上，我们添加了 @close=”handleCloseForm”。这表示当 AddCountdownForm 组件触发 close 事件时，Nav.vue 将执行 handleCloseForm 方法。
• handleCloseForm 方法将 showAddCountdownForm.value 设置为 false，从而隐藏 AddCountdownForm 组件。
• 你也可以选择更简洁的写法，直接在模板中处理事件：@close=”showAddCountdownForm = false”。这在事件处理逻辑简单时非常方便。

完整示例概览

为了更好地理解，以下是 App.vue、Nav.vue 和 AddCountdownForm.vue 的整体结构，展示了它们如何协同工作：

App.vue

<script setup>
import Nav from "./components/Nav.vue";
</script>
<template>
<Nav/>
</template>

Nav.vue (如上所示)

AddCountdownForm.vue (如上所示)

注意事项与最佳实践

1. 事件命名规范： 推荐使用 kebab-case（烤串命名法）来命名事件，例如 item-selected、update-value。这与 HTML 属性的命名习惯保持一致。
2. defineEmits 的使用： 强烈建议在 script setup 中使用 defineEmits 宏来声明组件可以触发的事件。这不仅提高了代码的可读性，还能在开发工具中提供更好的提示，并在 TypeScript 项目中提供类型检查。
3. 事件参数： $emit 方法可以接收额外的参数。例如，$emit(‘update’, newValue)。在父组件中，可以通过 $event 访问这些参数：@update=”handleUpdate($event)”。
4. 替代方案：v-model
   对于更常见的表单输入或双向绑定场景，Vue 提供了 v-model 语法糖。v-model 本质上是 prop (modelValue) 和 event (update:modelValue) 的组合。如果你的场景是控制一个值的双向同步，v-model 会是更简洁优雅的选择。例如，你可以将 showAddCountdownForm 作为 v-model 传递给子组件。
5. 更复杂的通信：provide/inject 或状态管理库
   对于跨多层组件的通信（祖先与后代），或者全局状态管理，provide/inject API 或 Vuex/Pinia 等状态管理库是更合适的选择。自定义事件主要用于直接的父子组件通信。

总结

通过自定义事件 ($emit 和 v-on)，Vue.js 提供了一种强大且灵活的机制，用于实现子组件向父组件的通信。这种模式使得组件能够保持高度的解耦，各自专注于自己的职责，同时又能有效地协作，共同构建出复杂的交互界面。理解并熟练运用自定义事件是掌握 Vue 组件化开发的关键一步。