美文网首页
Vue3_19(Teleport传送组件)

Vue3_19(Teleport传送组件)

作者: BingJS | 来源:发表于2022-09-21 12:27 被阅读0次

Teleport Vue 3.0新特性之一。
Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术;类似于 React 的 Portal。
主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响。
使用方法:
通过to 属性 插入指定元素位置 to="body" 便可以将Teleport 内容传送到指定位置

<Teleport to="body">
    <Loading></Loading>
</Teleport>

也可以自定义传送位置 支持 class id等 选择器

<div id="app"></div>
<div class="modal"></div>
<Teleport to=".modal">
   <Loading></Loading>
</Teleport>

也可以使用多个

<Teleport to=".modal1">
     <Loading></Loading>
</Teleport>
<Teleport to=".modal2">
     <Loading></Loading>
</Teleport>

相关文章

  • Vue3_19(Teleport传送组件)

    Teleport Vue 3.0新特性之一。Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级...

  • Teleport组件

    Teleport是个内置组件,它可以将组件内部模板传送到DOM结构外层位置去 使用 一般用于模态框

  • Vue3内置组件之Teleport(学习笔记)

    是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去...

  • VUE3.0 teleport组件

    teleport 组件 也可以说独立组件 绑定

  • 九.弹出模态框使用Teleport

    使用Teleport实现一个模态对话框的组件 teleport ,把模板的内容移动到当前组件之外的DOM 中,可以...

  • vue3 Teleport组件

    Teleport,被称为传送门组件,用于提供一种简洁的方式,指定其里面内容的父元素 例如,定义一个模态框,该模态框...

  • Teleport组件

    Teleport也被称为传送门组件,用于提供一种简洁的方式,指定其里面内容的父元素 为了方便我将相关内容简记如下图...

  • Vue3新特性:内置组件teleport

    Vue3内置组件teleport 将teleport包裹的元素移动到某个DOM节点下有两个参数to - strin...

  • Vue3.0新特性----teleport组件

    teleport 官方文档传送门[https://v3.cn.vuejs.org/api/built-in-com...

  • 32.teleport内置组件

    认识teleport内置组件 在组件化开发中,我们封装一个组件A,在另外一个组件B中使用: 那么组件A中templ...

网友评论

      本文标题:Vue3_19(Teleport传送组件)

      本文链接:https://www.haomeiwen.com/subject/fspsdrtx.html