vue3.2自定义弹窗组件结合函数式调用示例详解

目录

• 前言
• 手写弹窗组件
• 组件调用
• 函数式调用
• 如何使用
• 含样式完整源码
• 效果图

前言

涉及的vue3知识点/API，createApp defineProps defineEmits

组件调用

在需要使用的地方引入组件，v-model:show 相当于vue2写法的 :show.sync 前方指路

函数式调用

components目录下新建Dialog.js文件

将上面写好的组件引入，创建一个实例，挂载到body节点

import { createApp } from 'vue'
import Dialog from '@/components/Dialog.vue'
const createDialog = (message, option = {}) => {
    const mountNode = document.createElement('div')
    const Instance = createApp(Dialog, {
        show: true,
        message,
        ...option,
        close: () => { 
            Instance.unmount(mountNode); 
            document.body.removeChild(mountNode);
        }
    })
    document.body.appendChild(mountNode)
    Instance.mount(mountNode)
}
export default createDialog

createApp 第二个参数，是传递prop给组件，close方法用于点击确定移除弹窗，所以我们需要改造一下Dialog.vue，改造后的代码在下面含样式完整源码里，改造后就能实现组件调用和函数式调用合二为一了。

如何使用

含样式完整源码

Dialog.vue

效果图

以上就是vue3.2自定义弹窗组件结合函数式调用示例详解的详细内容，更多关于vue3.2弹窗组件函数式调用的资料请关注脚本之家其它相关文章！