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

1. 问题背景与场景分析

在 vue.js 应用开发中，组件化是核心思想。我们经常会遇到这样的场景：一个父组件（例如 nav.vue）负责管理某个状态（例如一个布尔类型的 showaddcountdownform），这个状态决定了一个子组件（例如 addcountdownform.vue）的显示与隐藏。父组件可以通过修改 showaddcountdownform 的值来控制子组件的可见性。

例如，在 Nav.vue 中，点击一个按钮可以设置 showAddCountdownForm.value = true，从而显示 AddCountdownForm。然而，当用户在 AddCountdownForm 内部完成操作或点击“关闭”按钮时，如何通知 Nav.vue 将 showAddCountdownForm 设置回 false，从而隐藏表单呢？由于 showAddCountdownForm 定义在 Nav.vue 中，AddCountdownForm.vue 无法直接访问并修改它。

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

Vue 3 提供了一种标准的父子组件通信机制来解决这个问题：自定义事件（Custom Events）。子组件可以通过 $emit 方法触发一个自定义事件，并将数据传递给父组件。父组件则通过在子组件标签上监听这个事件，并在事件触发时执行相应的处理函数来更新自身状态。

这种机制遵循了“单向数据流”的原则：数据从父组件流向子组件（通过 props），而事件从子组件流向父组件，避免了直接修改父组件状态可能带来的混乱。

3. 实现步骤

我们将通过修改 Nav.vue 和 AddCountdownForm.vue 来实现这一功能。

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

3.1 子组件 AddCountdownForm.vue 发送关闭事件

首先，在 AddCountdownForm.vue 中，我们需要在用户点击“关闭”操作时，通知父组件。

<!-- 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')">close</div>
      </div>
      <div>Text</div>
    </div>
  </div>
</template>

<script setup>
// 如果需要，可以在这里定义组件的 props 或其他逻辑
// defineEmits(['close']); // 推荐显式声明组件将发出的事件
</script>

代码解析：

• 在 <div>close</div> 元素上，我们添加了一个 @click="$emit('close')" 事件监听器。
• $emit('close') 是 Vue 3 中用于触发自定义事件的方法。第一个参数是事件的名称（这里是 'close'），后续参数可以是要传递给父组件的数据。在这个场景中，我们只需要通知父组件关闭，所以不需要传递额外数据。
• 最佳实践： 在 script setup 中，可以使用 defineEmits(['close']) 显式声明组件可以发出的事件。这有助于提供更好的类型检查和代码可读性。

3.2 父组件 Nav.vue 监听并处理关闭事件

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

通义视频

通义万相AI视频生成工具

70

查看详情

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

// 处理 AddCountdownForm 发出的 '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 === true" 
      @close="handleCloseForm" 
    />
  </div>
</template>

代码解析：

• 在 Nav.vue 的 <script setup> 中，我们定义了 showAddCountdownForm 这个响应式变量来控制表单的显示状态。

• 我们还定义了一个 handleCloseForm 函数，它的作用是将 showAddCountdownForm.value 设置为 false。

• 在 <template> 中，当渲染 AddCountdownForm 组件时，我们使用 @close="handleCloseForm" 语法来监听子组件发出的 'close' 事件。当 AddCountdownForm 触发 'close' 事件时，handleCloseForm 函数就会被调用，从而隐藏表单。

• App.vue 作为根组件，只需简单地引入并使用 Nav 组件即可：

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

  登录后复制

4. 注意事项与最佳实践

• 事件命名： 建议使用 kebab-case（烤串命名法，如 my-event）来命名自定义事件，尽管 Vue 3 也可以处理 camelCase（驼峰命名法），但 kebab-case 在模板中使用时更符合 HTML 属性的命名习惯。
• 传递数据： 如果子组件需要向父组件传递数据，可以在 $emit 的第二个及后续参数中提供。例如：$emit('update:value', newValue)。父组件的事件处理函数会接收这些参数：@update:value="handleUpdate"，其中 handleUpdate(newValue)。
• 显式声明事件： 在 script setup 中，使用 defineEmits 宏来显式声明组件将发出的事件，这提供了更好的代码可读性和类型检查，尤其是在使用 TypeScript 时。

  <script setup>
  const emit = defineEmits(['close', 'submitForm']);
  // ...
  const handleClick = () => {
    emit('close');
  };
  </script>

  登录后复制
• 替代方案：
  • Props： 对于父组件向子组件传递数据，props 是首选。
  • v-model： 如果子组件需要双向绑定父组件的某个属性（例如表单输入），可以使用 v-model 语法糖，它本质上是 prop 和 emit 的结合。
  • provide/inject： 对于跨多层嵌套组件的通信，provide/inject 提供了一种在祖先组件和后代组件之间共享状态的方式。
  • Vuex/Pinia： 对于大型应用或需要全局状态管理的情况，使用状态管理库（如 Vuex 或 Pinia）是更合适的选择。

5. 总结

通过自定义事件，Vue 3 提供了一种清晰、高效且遵循单向数据流原则的父子组件通信方式。在子组件中触发事件，父组件监听并响应，这种模式使得组件间的协作变得简单而可维护。掌握自定义事件是构建健壮和可扩展 Vue 应用的关键技能之一，尤其适用于控制模态框、弹出层或表单等组件的显示与隐藏逻辑。

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