vue基于Teleport实现Modal组件

1.认识teleport

像我们如果写modal组件、message组件、loading组件这种全局式组件，没有teleport的话，将它们引入一个.vue文件中，则他们的html结构会被添加到组件模板中，这是不够完美的。

• 没有teleport

• 有teleport

下面就实战介绍一下如何用teleport开发modal组件

2.teleport的基本用法

teleport的写法十分简单，只需要用<teleport></teleport>将内容包裹，并用to指定将html挂到哪个父节点下，就可以啦。

3.第一步优化

如果我们在代码中将teleport要挂载的dom写死，那么每创建一个全局式组件，就需要有一个dom节点，会越来越多，并且一直存在，这样的写法不是很优雅。比较好的解决方案就是：

• 在创建组件的时候，动态创建一个dom节点document.createelement()，
• 并添加到body中，document.body.appendchild()，
• 在组件卸载的时候销毁这个dom document.body.removechild()，

4.第二步优化

如果我们后续还要添加message组件，loading组件等功能，同样要用到teleport，在每一个组件内部都写这么一段代码，实在有点冗余，vue3使我们能够很方便的将逻辑功能提取出来，从而达到逻辑复用的目的。

我们在src-hooks文件夹下创建usedomcreate.ts文件，来封装这一块逻辑

使用：

5.实现modal组件

具体封装modal组件的细节这里就不讲啦，也没有什么复杂的逻辑。直接上代码。

使用示例

以上就是vue基于teleport实现modal组件的详细内容，更多关于vue teleport实现modal组件的资料请关注其它相关文章！