封装命令式组件：以 Vue 3 中的 Modal 弹窗为例

斯~内克

于 2025-04-10 14:48:29 发布

阅读量1.1k

点赞数 23

分类专栏： vue知识点前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51757896/article/details/147118838

版权

前端同时被 2 个专栏收录

40 篇文章

订阅专栏

vue知识点

25 篇文章

订阅专栏

在现代前端开发中，组件化已经成为构建复杂用户界面的核心思想。Vue 3 提供了强大的组合式 API 和函数式编程能力，使得开发者可以更加灵活地封装和复用功能模块。本文将以一个简单的 Modal 弹窗组件为例，深入探讨如何通过命令式调用的方式封装组件，并结合实际代码展示其设计与实现。

一、什么是命令式组件？

命令式组件是一种通过函数调用来控制组件行为的设计模式。与声明式组件不同，命令式组件不依赖于父组件的生命周期或数据流，而是通过直接调用函数来触发组件的渲染或销毁。这种方式特别适合处理一些独立性强、交互复杂的场景，例如弹窗、提示框、加载动画等。

在 Vue 3 中，我们可以通过 createApp 方法动态创建一个子应用实例，并将其挂载到 DOM 上。这种技术为命令式组件的实现提供了基础支持。

二、需求分析

假设我们需要实现一个通用的 Modal 弹窗组件，该组件需要满足以下需求：

动态显示：能够通过函数调用的方式动态显示和隐藏。
参数传递：支持向弹窗传递标题或其他配置信息。
事件回调：提供关闭事件的回调机制，以便父组件可以监听弹窗的关闭状态。
样式隔离：确保弹窗的样式不会影响到页面其他部分。

基于这些需求，我们将分步实现一个完整的命令式组件。

三、实现步骤

1. 创建 Modal 组件

首先，我们定义一个名为 MessageBox.vue 的组件，用于展示弹窗内容。以下是该组件的代码：

<template>
  <div class="modal">
    <div class="box">
      <div class="text">{{ msg }}</div>
      <div class="actions">
        <button @click="emit('close')">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(["close"]);
defineProps({
  msg: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.modal {
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);

  .box {
    display: inline-block;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    border-radius: 4px;
    padding: 16px;

    .actions {
      display: flex;
      justify-content: center;
      gap: 10px;
    }
  }
}
</style>

说明：

msg 是通过 props 传递的标题内容。
点击“确定”按钮时，触发 close 事件，通知外部关闭弹窗。
使用 scoped 样式确保样式仅作用于当前组件。

2. 封装命令式接口

接下来，我们创建一个名为 useModal.ts 的文件，用于封装命令式调用逻辑。以下是其实现代码：

import MessageBox from "./MessageBox.vue";
import { createApp } from "vue";

export default function useModal(msg: string) {
  // 动态创建容器元素
  const container = document.createElement("div");
  document.body.appendChild(container);

  // 创建子应用实例
  const app = createApp(MessageBox, {
    msg,
    onClose: () => {
      // 销毁子应用并移除容器
      app.unmount();
      document.body.removeChild(container);
    },
  });

  // 挂载子应用
  app.mount(container);

  // 返回关闭方法
  return () => {
    app.unmount();
    document.body.removeChild(container);
  };
}

说明：

使用 createApp 方法动态创建一个子应用实例。
将 msg 和 onClose 回调作为 props 传递给 MessageBox 组件。
提供一个返回值，用于手动关闭弹窗。

3. 在页面中使用

最后，我们在 test.vue 文件中测试该组件的功能。以下是其实现代码：

<template>
  <div>
    <button @click="showModal">弹窗</button>
  </div>
</template>

<script setup lang="ts">
import useModal from '@/hooks/useModal.ts';

const showModal = () => {
  const close = useModal('弹窗标题');
  // 可选：延迟关闭弹窗
  setTimeout(close, 3000);
};
</script>