标签：11 Teleport Vue DOM -- 位置 组件 data

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响。

场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多，原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难，另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值，这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它

使用方法：

通过to 属性 插入指定元素位置 to="body" 便可以将Teleport 内容传送到指定位置，例如下面将内容传输到body里面。

 也可以自定义传送位置 支持 class id等 选择器；也可以使用多个。

<div id="app"></div>
<div class="modal"></div>


<Teleport to=".modal">
   测试
</Teleport>
    

<Teleport to="#app">
   测试
</Teleport>

标签：11,Teleport,Vue,DOM,--,位置,组件,data
来源： https://www.cnblogs.com/lotusflower/p/16564661.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。