Teleport 的使用

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”

场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多

原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难

另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值

这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它

Teleport 的使用

准备

快速搭建一个 vue3 的项目

$ npm init vite-app learn-vue3
$ cd learn-vue3
$ npm install
$ npm run dev
复制代码

用 yarn

$ yarn create vite-app learn-vue3
$ cd learn-vue3
$ yarn
$ yarn dev
复制代码

打开： http://localhost:3000/，看到如下页面，说明成功了

image.png

toast

index.html 中

  <div id="app"></div>
+  <div id="teleport-target"></div>
  <script type="module" src="/src/main.js"></script>
复制代码

src/components/HelloWorld.vue 中，添加如下，留意 to 属性跟上面的 id 选择器一致

  <button @click="showToast" class="btn">打开 toast</button>
  <!-- to 属性就是目标位置 -->
  <teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
      <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
  </teleport>
复制代码

import { ref } from 'vue';
export default {
  setup() {
    // toast 的封装
    const visible = ref(false);
    let timer;
    const showToast = () => {
      visible.value = true;
      clearTimeout(timer);
      timer = setTimeout(() => {
        visible.value = false;
      }, 2000);
    }
    return {
      visible,
      showToast
    }
  }
}
复制代码

效果展示：

image.png

可以看到，我们使用 teleport 组件，通过 to 属性，指定该组件渲染的位置与 <div id="app"></div> 同级，也就是在 body 下，但是 teleport 的状态 visible 又是完全由内部 Vue 组件控制

与 Vue components 一起使用 —— modal

如果 <teleport> 包含 Vue 组件，则它仍将是 <teleport> 父组件的逻辑子组件

接下来我们以一个 modal 组件为例

  <div id="app"></div>
  <div id="teleport-target"></div>
+  <div id="modal-container"></div>
  <script type="module" src="/src/main.js"></script>
复制代码

  <teleport to="#modal-container">
    <!-- use the modal component, pass in the prop -->
    <modal :show="showModal" @close="showModal = false">
      <template #header>
        <h3>custom header</h3>
      </template>
    </modal>
  </teleport>
复制代码

JS 核心代码如下：

import { ref } from 'vue';
import Modal from './Modal.vue';
export default {
  components: {
    Modal
  },
  setup() {
    // modal 的封装
    const showModal = ref(false);
    return {
      showModal
    }
  }
}
复制代码

在这种情况下，即使在不同的地方渲染 Modal，它仍将是当前组件（调用 Modal 的组件）的子级，并将从中接收 show prop

这也意味着来自父组件的注入按预期工作，并且子组件将嵌套在 Vue Devtools 中的父组件之下，而不是放在实际内容移动到的位置

看实际效果以及在 Vue Devtool 中

image.png

总结

本文主要介绍了 Vue 3 的新特性——Teleport，从为什么要使用 Teleport，以及通过两个小 demo，演示它的基础使用，希望能够对你有帮助https://www.bilibili.com/video/BV1B54y1m7LC