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 是一种能够将我们的模板移动到 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/，看到如下页面，说明成功了
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，查看代码和效果还可以直接通过沙箱
网友评论