您现在的位置是：网站首页> 编程资料编程资料
vue3.2自定义弹窗组件结合函数式调用示例详解_vue.js_
2023-05-24
350人已围观
简介 vue3.2自定义弹窗组件结合函数式调用示例详解_vue.js_
组件调用
在需要使用的地方引入组件，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
{{title}}{{message}}
效果图
以上就是vue3.2自定义弹窗组件结合函数式调用示例详解的详细内容，更多关于vue3.2弹窗组件函数式调用的资料请关注其它相关文章！
相关内容
- 关于应用UI组件的移动端适配方式_vue.js_
- 详解vue3中如何使用shaka-player_vue.js_
- JavaScript几种常见循环遍历使用和区别_javascript技巧_
- 详解vue3中如何使用youtube-player_vue.js_
- Node中node_modules文件夹及package.json文件的作用说明_node.js_
- JavaScript中的常见继承总结_javascript技巧_
- Vue版本vue2.9.6升级到vue3.0的详细步骤_vue.js_
- 简单了解JavaScript中的new Function_javascript技巧_
- 如何删除vue项目下的node_modules文件夹_vue.js_
- vue3实现手机上可拖拽元素的组件_vue.js_
