美文网首页
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传送组件)

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