Vue3函数调用组件：用createApp动态创建弹窗和通知
在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应用更加灵活高效。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
