Vue 3 组件间通信：使用自定义事件控制子组件的显示与隐藏

引言：组件可见性管理的挑战

在 vue 3 应用开发中，组件化是核心思想。我们经常会遇到父组件控制子组件显示状态的需求，例如点击按钮弹出表单。然而，当用户在子组件内部完成操作或点击“关闭”按钮时，如何通知父组件来隐藏该子组件，是组件间通信的一个常见问题。本教程将聚焦于如何利用 vue 3 的自定义事件机制，优雅地解决这一“子组件通知父组件改变自身状态”的问题。

Vue 3 自定义事件 ($emit) 机制

Vue 3 中的自定义事件是实现子组件向父组件通信的标准方式。当子组件需要向父组件传递信息或触发父组件的某个行为时，它可以通过 emit 方法派发一个自定义事件。父组件则可以在使用子组件时，通过 v-on 或 @ 语法监听这些事件，并在事件触发时执行相应的方法。这种模式遵循了“单向数据流”原则，即数据从父组件流向子组件，而事件从子组件流向父组件，保持了组件的清晰职责。

实现步骤与代码示例

假设我们有一个 Nav.vue 组件，其中包含一个按钮用于显示 AddCountdownForm.vue 组件。AddCountdownForm.vue 是一个模态表单，需要提供一个“关闭”功能，当用户点击“关闭”时，Nav.vue 应该隐藏 AddCountdownForm.vue。

1. 父组件 (Nav.vue) 的实现

在父组件 Nav.vue 中，我们需要：

1. 定义一个响应式变量 showAddCountdownForm 来控制 AddCountdownForm 的可见性。
2. 在 template 中使用 v-show 或 v-if 绑定 showAddCountdownForm 到子组件 AddCountdownForm。
3. 监听 AddCountdownForm 组件发出的自定义事件（例如 close），并在事件触发时将 showAddCountdownForm 设置为 false。

<!-- 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);

// 处理子组件发出的 'close' 事件
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" />
        </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" />
        </div>
      </div>
    </nav>
    <!-- 监听 AddCountdownForm 组件的 'close' 事件 -->
    <AddCountdownForm v-show="showAddCountdownForm" @close="handleCloseForm" />
  </div>
</template>

2. 子组件 (AddCountdownForm.vue) 的实现

在子组件 AddCountdownForm.vue 中，我们需要：

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

百度智能云·曦灵

百度旗下的AI数字人平台

83

查看详情

1. 定义组件可以发出的事件，这通常通过 defineEmits 宏来完成，以获得更好的类型检查和 IDE 支持。
2. 在需要关闭表单的地方（例如“关闭”按钮的点击事件中），调用 emit 方法派发自定义事件。

<!-- AddCountdownForm.vue -->
<script setup>
// 使用 defineEmits 声明组件可以发出的事件
const emit = defineEmits(['close']);

const closeForm = () => {
  // 派发 'close' 事件，通知父组件
  emit('close');
};
</script>

<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' 文本时，触发 closeForm 方法 -->
        <div @click="closeForm" class="cursor-pointer p-2">关闭</div>
      </div>
      <div class="p-4">这里是表单内容</div>
    </div>
  </div>
</template>

代码解析

• Nav.vue:

  • const showAddCountdownForm = ref(false);：创建了一个响应式引用，用于控制 AddCountdownForm 的显示状态。
  • @click="showAddCountdownForm = true"：当点击导航栏中的加号图标时，将 showAddCountdownForm 设置为 true，从而显示 AddCountdownForm 组件。
  • <AddCountdownForm v-show="showAddCountdownForm" @close="handleCloseForm" />：
    • v-show="showAddCountdownForm"：根据 showAddCountdownForm 的布尔值来控制 AddCountdownForm 组件的 CSS display 属性，实现显示或隐藏。
    • @close="handleCloseForm"：这是关键所在。它监听 AddCountdownForm 组件发出的名为 close 的自定义事件。一旦 AddCountdownForm 派发了 close 事件，Nav.vue 就会执行 handleCloseForm 方法。
  • const handleCloseForm = () => { showAddCountdownForm.value = false; };：当 close 事件被监听到时，此方法将 showAddCountdownForm 设置为 false，从而隐藏 AddCountdownForm 组件。

• AddCountdownForm.vue:

  • const emit = defineEmits(['close']);：在 <script setup> 中，defineEmits 宏用于声明组件可以发出的事件。这里声明了 AddCountdownForm 可以发出一个名为 close 的事件。这有助于 Vue 更好地理解组件接口，并提供更好的开发体验（例如，在父组件中使用时，IDE 会有事件提示）。
  • const closeForm = () => { emit('close'); };：定义了一个 closeForm 方法。当用户点击“关闭”文本时，此方法被调用，并通过 emit('close') 派发 close 事件。这个事件会被父组件 Nav.vue 捕获。

通过这种方式，AddCountdownForm 组件无需知道 showAddCountdownForm 变量的存在，它只需要在需要关闭时发出一个 close 事件即可。而 Nav.vue 组件则负责监听这个事件并更新其自身的状态，完美地实现了组件间的解耦和通信。

注意事项与最佳实践

1. 事件命名: 建议使用小写字母和短横线连接（kebab-case）来命名自定义事件，例如 item-selected 而不是 itemSelected。这与 HTML 属性命名约定保持一致。
2. 事件参数: emit 方法可以接受额外的参数，这些参数会传递给父组件的事件处理函数。例如 emit('update:modelValue', newValue)。
3. 单向数据流: 始终记住 Vue 的单向数据流原则。子组件不应该直接修改父组件的数据（例如 props）。当子组件需要通知父组件改变数据时，应该通过事件来完成。
4. 替代方案:
   • Props Down, Events Up: 这是最常见的父子通信模式，适用于大多数场景。
   • v-model: 对于表单输入或需要双向绑定的场景，可以使用 v-model 语法糖，它实际上是 prop 和 emit 的组合。
   • defineExpose / ref: 在某些特定且需要强耦合的场景下，父组件可以通过 ref 直接访问子组件的实例并调用其暴露的方法或属性。但这通常不推荐用于简单的状态管理，因为它增加了组件间的耦合度。
   • Provide / Inject: 适用于祖先组件与后代组件之间的通信，避免多层 props 传递（prop drilling）。
   • Pinia / Vuex: 对于大型应用的状态管理，全局状态管理库是更好的选择。

总结

通过自定义事件 ($emit) 机制，Vue 3 提供了一种强大而灵活的方式，使子组件能够安全、有效地与父组件进行通信。在处理子组件关闭、数据更新等场景时，采用“事件向上冒泡”的模式，能够保持组件的独立性和可维护性，是 Vue 3 开发中不可或缺的关键技能。掌握这一模式，将有助于构建结构清晰、易于扩展的 Vue 应用。

以上就是Vue 3 组件间通信：使用自定义事件控制子组件的显示与隐藏的详细内容，更多请关注php中文网其它相关文章！