Vue3 封装命令式组件

归档20

学习笔记13 技术分享7

414 字

2 分钟

Vue3 封装命令式组件

2026-04-20

学习笔记

vue

前端

浏览量加载中...

前言#

命令式组件就是通过 $message()、ElMessage() 这种方式调用的组件，而不是在模板里写 <Message />。

创建命令式组件#

1
<script setup>
2
  import { ref } from "vue";
3

4
  const messageShow = ref(false);
5

6
  function showMessage(text) {
7
    messageShow.value = true;
8
  }
9

10
  function closeMessage() {
11
    messageShow.value = false;
12
  }
13

14
  defineProps({
15
    message: String,
16
    close: {
17
      type: Function,
18
      default: () => {
19
        messageShow.value = false;
20
      },
21
    },
22
  });
23

24
</script>
25
<template>
26
  <div v-if="messageShow">{{ message }}</div>
27
</template>

创建调用函数#

1
import MessageBox from "./MessageBox.vue";
2
import { createApp } from "vue";
3

4
export default function(text, handler) {
5
  const app = createApp(MessageBox, {
6
    message: text,
7
    close: () => {
8
      handler?.();
9
      app.unmount();
10
      document.body.removeChild(div);
11
    },
12
  });
13
  const div = document.createElement("div");
14
  app.mount(div);
15
  document.body.appendChild(div);
16

17
  return {
18
    close() {
19
      app.unmount();
20
      document.body.removeChild(div);
21
    },
22
  };
23
}

使用#

1
const msg = showMessage("你好");
2
msg.close(); // 手动关闭

缺陷#

这种方式创建的组件无法接收组件内的状态更新，比如子组件要主动关闭时，close 函数无法被正确调用。需要借助 reactive 或其他方式传递上下文。

方式二：基于回调函数#

1
<script setup>
2
  import { ref } from "vue";
3

4
  const messageShow = ref(false);
5
  const messageText = ref("");
6

7
  function showMessage(text, onClose) {
8
    messageText.value = text;
9
    messageShow.value = true;
10
  }
11

12
  function closeMessage() {
13
    messageShow.value = false;
14
    onClose?.();
15
  }
16

17
  defineProps({
18
    text: String,
19
  });
20

21
  defineExpose({ showMessage, closeMessage });
22
</script>
23

24
<template>
25
  <div v-if="messageShow">{{ text }}</div>
26
</template>

使用#

1
import Message from "./Message.vue";
2
import { createApp } from "vue";
3

4
function showMessage(text, onClose) {
5
  const div = document.createElement("div");
6
  const app = createApp(Message, {
7
    text,
8
    onClose,
9
  });
10
  app.mount(div);
11
  document.body.appendChild(div);
12
}