认识Vue3中的teleport

teleport组件

teleport翻译过来的意思是远程传送。
teleport组件是vue3中的一个内置组件,实现的就是将一个元素传送给指定的DOM节点下。

teleport组件使用

这里拿我们经常用到的模态框做实例

我们先看看不使用 teleport组件的效果
// 父组件

    
这是一个modal框,会瞬移
// 子组件 modal

测试可以看到子组件modal是渲染在#app内的


modal渲染.png
使用teleport瞬移组件到指定的dom中

首先在项目的/public/index.html中加入一个元素,作为teleport组件的接收容器


    
    
// teleport 容器

然后给modal组件套上,并设置to属性指定容器,代码如下


最后我们看看渲染的效果,modal组件已经瞬移到#modal下了


teleport渲染效果.png

以上就是vue3中teleport的知识啦,欢迎评论区补充~~

你可能感兴趣的:(认识Vue3中的teleport)