Vue3的通灵之术Teleport

前言

近期Vue3更新了一些新的内容，我都还没有一个一个仔细去看，但是还是有必要去解读一下新内容的。就先从Teleport 开始吧。

官方对 Teleport 的解释是：<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

这么说的话，像我这种火影迷，那不就相当于火影忍者里面的通灵之术吗？可以在任意位置召唤一个组件。

在一些特定的环境，这个组件确实会让业务逻辑变得非常好实现，他的使用场景有：

• 弹窗
• 浮动元素
• 等等 

怎么说都是一个很酷的组件嘞。

案例

下面就展示一个小案例：

<template><div><button @click="changeTarget">改变目标位置</button><teleport :to="target"><div class="modal"><p>这是一个动态目标的模态框</p></div></teleport></div>
</template><script>
export default {data() {return {target: 'body'};},methods: {changeTarget() {this.target = '#someOtherElement'; // 改变目标位置}}
};
</script>

除了这种用法，在 Vue3.5 中可以使用 defer prop 推迟 Teleport 的目标解析，直到应用的其他部分挂载。但是需要注意的是，目标元素必须与 Teleport 在同一个挂载/更新周期内渲染，即如果 <div> 在一秒后才挂载，Teleport 仍然会报错。延迟 Teleport 的原理与 mounted 生命周期钩子类似。