Vue3函数调用组件：用createApp动态创建弹窗和通知

摘要：在Vue 3开发中，我们经常需要动态创建和挂载组件，比如弹窗、通知提示这类交互组件。跟直接在模板里写组件不同，函数调用组件可以动态创建实例，传参和事件处理也更灵活。

在Vue 3开发中，我们经常需要动态创建和挂载组件，比如弹窗、通知提示这类交互组件。跟直接在模板里写组件不同，函数调用组件可以动态创建实例，传参和事件处理也更灵活。

本文介绍如何用Vue3的createApp实现一个支持props和事件处理的函数调用组件，并提供template和render两种写法。

什么是函数调用组件

函数调用组件就是通过JavaScript函数动态创建Vue组件实例的一种方式。常见的使用场景包括：

弹窗（比如MessageBox）
通知组件（比如Toast）
特定交互组件（动态表单、选择器等）

它的几个特点：

动态创建：不需要提前在模板里写好
灵活传参：可以动态传递props和事件
可销毁：组件用完后可以清理掉

基础实现

我们以一个叫ChanceReassign的组件为例，它支持props和emit事件。

1. template方式的实现

在Vue 3中，createApp是动态创建组件实例的核心方法。先看template写法：

import ChanceReassign from '@/components/chanceReassign/chanceReassign.vue';
import { createApp } from 'vue';
import VantInstall from '@/plugins/vantInstall';

export default function chanceReturn(props) {
  // 创建动态容器
  const container = document.createElement('div');
  container.classList.add('SHARE');
  document.body.appendChild(container);

  // 创建Vue应用实例
  const app = createApp({
    inheritAttrs: false,
    setup(_, { attrs }) {
      return { props, attrs };
    },
    template: `
      <ChanceReassign v-bind="props" v-on="attrs" />
    `,
  });

  // 注册全局插件和组件
  VantInstall(app);
  app.component('ChanceReassign', ChanceReassign);

  // 挂载到容器
  const instance = app.mount(container);

  // 提供销毁方法
  instance.unmountApp = () => {
    app.unmount();
    document.body.removeChild(container);
  };

  return instance;
}

核心逻辑说明

动态容器：用document.createElement创建一个DOM容器，组件挂载在这里
setup中的attrs：把事件绑定（如onConfirm、onClose）通过v-on="attrs"动态传给组件
插件注册：通过VantInstall注册全局依赖，确保组件功能完整
销毁机制：组件卸载时清理容器，防止内存泄漏

使用示例

import chanceReturn from '@/utils/chanceReturn';

const instance = chanceReturn({
  someProp: 'value',
  onConfirm: () => console.log('Confirmed!'),
  onClose: () => console.log('Closed!'),
});

// 5秒后销毁组件
setTimeout(() => {
  instance.unmountApp();
}, 5000);

2. render方式的实现

render函数比template更灵活，适合需要动态插入插槽或处理复杂逻辑的场景。

import { createApp, h } from 'vue';
import ChanceReassign from '@/components/chanceReassign/chanceReassign.vue';
import VantInstall from '@/plugins/vantInstall';

export default function chanceReturn(props) {
  // 创建容器
  const container = document.createElement('div');
  container.classList.add('SHARE');
  document.body.appendChild(container);

  // 创建Vue应用实例
  const app = createApp({
    render() {
      // 用h函数创建VNode
      // 过滤出以on开头的事件
      const events = Object.fromEntries(
        Object.entries(props).filter(([key]) => key.startsWith('on'))
      );
      return h(ChanceReassign, {
        ...props,
        ...events,
      });
    },
  });

  // 注册全局插件和组件
  VantInstall(app);
  app.component('ChanceReassign', ChanceReassign);

  // 挂载到容器
  const instance = app.mount(container);

  // 提供销毁方法
  instance.unmountApp = () => {
    app.unmount();
    document.body.removeChild(container);
  };

  return instance;
}

核心逻辑说明

render函数：用h函数动态创建虚拟节点（VNode），支持动态绑定props和attrs
事件过滤：通过key.startsWith('on')筛选出事件，自动绑定
与template的区别：render更灵活，比如可以动态插入插槽

使用方式跟template实现一样：

const instance = chanceReturn({
  someProp: 'value',
  onConfirm: () => console.log('Confirmed!'),
});

instance.unmountApp();

两种方式对比

特性	template实现	render实现
简洁性	模板语法简单直观	JavaScript逻辑稍复杂
动态性	支持动态props和事件	支持动态props、事件和复杂逻辑
插入插槽	较难实现	容易实现
扩展性	中等	高
适用场景	简单传递props和事件	需要动态插槽或复杂逻辑

总结

通过createApp配合template或render函数，可以轻松实现函数调用组件。如果只是简单的props和事件传递，template写法更易读；如果需要动态插入插槽或处理复杂逻辑，render方式更合适。

根据实际场景选择对应的实现方式，能让Vue应用更加灵活高效。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_13537