阅读 4213

Vue 3 任意传送门——Teleport

2020 年 9 月 18 号,尤大大发布了 Vue 3.0,代号 One Piece。同时中英文版本的文档相继出来,笔者也去通读了一遍,发现很多宝藏,其中有个新特性非常吸引我——Teleport (中文译为:传入,读着有点奇怪,本文统一以英文 Teleport 来讲)

如果用过 React 的同学,可能对于 Portals 比较熟悉,详见。React 的 Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案,我理解,Vue 3 中的 Teleport 跟这个其实是类似的

Vue2,如果想要实现类似的功能,需要通过第三方库 portal-vue 去实现,感兴趣可以了解一下

本篇文章主要来探讨以下两个点:

  • Teleport 是什么?它解决的是什么问题?
  • 通过一个小实例介绍 Teleport 的使用

为什么我们需要 Teleport

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

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

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

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

这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码,这意味着我们可以使用组件的 dataprops。然后在 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/,看到如下页面,说明成功了

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
    }
  }
}
复制代码

效果展示:

可以看到,我们使用 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

总结

本文主要介绍了 Vue 3 的新特性——Teleport,从为什么要使用 Teleport,以及通过两个小 demo,演示它的基础使用,希望能够对你有帮助

本文涉及代码已全部上传到 Github,查看代码和效果还可以直接通过沙箱

参考

往期优秀文章推荐