type
status
date
slug
summary
tags
category
icon
password
Teleport
是Vue3
的新特性之一Teleport
是一种能够将我们的模板渲染至指定的DOM
节点上,不受父级style
、v-show
等属性影响,但data
、prop
数据依旧能够共用的技术,类似于react
的Protal
使用方法:
通过
to
属性,插入指定元素位置,to="body"
便可以将Teleport
的内容传送到指定位置也可以自定义传送位置,支持
class
、id
等选择器代码案例:
通过以上代码实验可以看到,如果不使用
Teleport
,子组件会被包含在父级div
下![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9a2d7286-473d-4ea0-a37a-d5d6248bd36b%2FUntitled.png?table=block&id=425eefae-b0c7-4a3e-9f04-e9b1bb99ee98&t=425eefae-b0c7-4a3e-9f04-e9b1bb99ee98)
如果使用了
Teleport
,将子组件传送到body
位置,子组件就和id
为app
的DOM
元素齐平![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F03ea9750-dd36-4c7f-8502-b0ad021eff10%2FUntitled_(1).png?table=block&id=61477e14-002e-4e60-9255-3fe3b95fc926&t=61477e14-002e-4e60-9255-3fe3b95fc926)
- 作者:衔蝉
- 链接:https://xianchan.ah.cn/article/vue3-15
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章