Vue3的通灵之术Teleport

海上彼尚2024-12-02 15:14

前言

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

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

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

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

弹窗
浮动元素
等等

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

案例

下面就展示一个小案例：

html 复制代码

<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 生命周期钩子类似。