1. 理解Vue3函数式组件的概念 在Vue 3中,函数式组件是一种没有状态(没有响应式数据)、没有实例(没有this上下文)的组件。它们主要用于渲染逻辑简单且不需要状态管理的场景。函数式组件通过函数接收props和context作为参数,并返回VNode(虚拟节点)。然而,函数式弹窗的实现并不依赖于函数式组件,而是利用Vue的编程接口动...
在这个showPasswordDialog函数中我们先创建了一个div元素,再将弹窗组件传递给了createApp函数生成一个dialogApp的实例。然后将创建的div元素挂载到body上面,再调用mount方法将我们的弹窗组件挂载到创建的div元素上,至此我们实现了通过函数式调用将弹窗组件渲染到body中。 现在我们再来看看传入到createApp函数的第二个对象参...
经过上面的介绍我们知道了可以调用createApp函数传入指定组件生成app,然后使用app.mount方法将这个组件挂载到指定的dom上面去。那么现在思路就清晰了,我们只需要将我们前面实现的弹窗组件作为第一个参数传递给createApp函数。第二个参数传入一个对象给弹窗组件的props,用以控制打开弹窗和注册弹窗关闭和确认的事件回调。下面...
然后将创建的div元素挂载到body上面,再调用mount方法将我们的弹窗组件挂载到创建的div元素上,至此我们实现了通过函数式调用将弹窗组件渲染到body中。 现在我们再来看看传入到createApp函数的第二个对象参数,我们给这个对象分别传入了visible属性、close和confirm回调方法,分别会赋值给弹窗组件props中的visible、close、confirm...
最终，我们实现了一个宇宙最强级别函数式弹窗组件的方法，它适应绝大多数使用场景：支持懒加载（异步加载函数）props传参事件绑定provide inject 注入数据各种自定义插槽暴露内部方法 六、源码 modal.vue <template> 父组件传入的 prop：{{ prop }} 父组件 provide 的信息：{{ message }} App根组件 ...
这里需要使用vue3的createApp,方法实现函数式组件调用 导入需要的弹窗组件 import CuDialog from '@/components/CuDialog.vue' 创建两个全局变量(命名随意),一个是存储createApp创建的组件,一个是放组件的dom letapp =null;letdiv =null; 定义两个方法,一个是显示弹窗,一个是隐藏弹窗 ...
Dialog.ts函数式调用的封装,可以直接使用函数调起弹窗。弹窗函数式调起(动态创建)一般有(createApp+monted) 和 (render+h)两种方案。 区别 createApp和mount用于创建和挂载整个Vue应用,而render和h函数用于渲染单个组件。 createApp和mount: 1.创建应用实例:使用createApp创建一个Vue应用实例 ...
5分钟搞定vue3函数式弹窗, 视频播放量 3424、弹幕量 0、点赞数 63、投硬币枚数 13、收藏人数 142、转发人数 5, 视频作者 你假装没察觉, 作者简介 公众号:前端欧阳,专注于分享工作中实用的vue干货,相关视频:【Vue+TypeScript+ElementPlus】7天光速打造属于自己的组件库
// 引入弹窗组件v3popup import V3Popup from './components/v3popup' createApp(App).use(V3Popup).mount('#app')复制代码 1. 2. 3. 4. 5. 6. 7. 同样的支持组件式和函数式两种灵活调用方式。 组件式 <!-- 提示框 --> <v3-popup v-model="showMsg" anim="fadeIn" content="msg提示框测试(...