探索 Vue3 ( 三 ) Teleport传送组件

Teleport Vue 3.0新特性之一。

Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术;

Teleport中的内容允许我们控制在任意的 DOM 中,完全不受父级style样式影响

绑定标签

探索 Vue3 ( 三 ) Teleport传送组件_第1张图片

to 属性是指定 teleport 中的内容加入的 DOM 元素。可以是标签名,也可以是 id 或类名。

 看看父组件的数据渲染

探索 Vue3 ( 三 ) Teleport传送组件_第2张图片

 ID 或者 类名绑定

探索 Vue3 ( 三 ) Teleport传送组件_第3张图片

 可以多个Teleport 一起使用

探索 Vue3 ( 三 ) Teleport传送组件_第4张图片

动态控制 Teleport

添加属性 :disabled="false"

探索 Vue3 ( 三 ) Teleport传送组件_第5张图片

探索 Vue3 ( 三 ) Teleport传送组件_第6张图片 disabled == true 就是展示,这样子就可以通过变量来动态控制,另外只要家里disabled 其它就算没有加默认变成false

你可能感兴趣的:(vue3,vue,前端大杂烩,vue.js,javascript,前端)