Vue.js 学习总结（8）—— Vue 3 的 Teleport 特性，让你实现跨组件传输内容

什么是 Teleport？

在 Vue 3 中，Teleport 是一个新的内置组件，它允许你将子组件或 DOM 元素渲染到指定的 DOM 节点之外。简而言之，你可以将某个组件“传送”到另一个地方，而不必让它们局限于父组件的 DOM 树结构中。

为什么需要 Teleport？

在实际开发中，我们可能会遇到一些场景，需要将某些元素（如模态框、工具提示、通知等）渲染到特定的 DOM 节点之外。例如，模态框通常需要被渲染到 body 标签下，而不是嵌套在某个父组件内。这种情况下，Teleport 就派上用场了。

环境准备

在开始之前，请确保你已经安装了 Node.js 和 Vue CLI。如果没有，请参考以下链接进行安装：

Node.js 官方网站

Vue CLI 安装指南

创建 Vue 3 项目

首先，使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中执行以下命令：

vue create teleport-demo

在提示中选择 Vue 3 版本。项目创建完成后，进入项目目录：

cd teleport-demo

使用 Teleport 实现跨组件传输内容

步骤一：创建模态框组件

在 src/components 目录下创建一个名为 Modal.vue 的文件。这个组件将包含模态框的内容和样式：

<template><div class="modal-overlay"><div class="modal-content"><slot></slot><button @click="$emit('close')">Close</button></div></div>
</template><script>
export default {name: 'Modal'
};
</script><style scoped>
.modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;
}.modal-content {background: white;padding: 20px;border-radius: 8px;
}
</style>

步骤二：在 App.vue 中使用 Teleport

打开 src/App.vue 文件，编辑模板部分以使用 Teleport 功能：

<template><div id="app"><button @click="showModal = true">Open Modal</button><teleport to="body"><modal v-if="showModal" @close="showModal = false"><h1>Hello Teleport!</h1><p>This content is teleported to the body element.</p></modal></teleport></div>
</template><script>
import Modal from './components/Modal.vue';export default {name: 'App',components: {Modal},data() {return {showModal: false};}
};
</script>

步骤三：运行项目

回到终端，运行以下命令启动开发服务器：

npm run serve

打开浏览器，访问 http://localhost:8080，你将看到一个按钮。点击按钮，模态框将显示，并且它被渲染到 body 标签下，而不是嵌套在父组件内。

深入理解 Teleport

`teleport` 指令详解

在 App.vue 中，使用 teleport 指令将 Modal 组件“传送”到 body 标签。这是 teleport 指令的基本用法：

<teleport to="body"><modal v-if="showModal" @close="showModal = false"><h1>Hello Teleport!</h1><p>This content is teleported to the body element.</p></modal>
</teleport>

`to` 属性

to 属性指定了目标 DOM 节点的选择器。在这个例子中，to="body" 表示将内容传送到 body 标签下。

你也可以指定其他选择器，例如 #modal-root，前提是目标节点在 DOM 中已经存在。

动态目标节点

你可以动态地改变 teleport 的目标节点。例如，如果你希望根据条件将内容传送到不同的节点，可以这样做：

<template><div id="app"><button @click="showModal = true">Open Modal</button><teleport :to="modalTarget"><modal v-if="showModal" @close="showModal = false"><h1>Hello Dynamic Teleport!</h1><p>This content is teleported dynamically.</p></modal></teleport></div>
</template><script>
import Modal from './components/Modal.vue';export default {name: 'App',components: {Modal},data() {return {showModal: false,modalTarget: 'body'  // 目标节点可以是动态的};}
};
</script>

Teleport 的高级用法

多个 Teleport

你可以在一个组件中使用多个 teleport 指令，将不同的内容传送到不同的目标节点。例如：

<template><div id="app"><button @click="showModal = true">Open Modal</button><teleport to="body"><modal v-if="showModal" @close="showModal = false"><h1>Modal in Body</h1></modal></teleport><teleport to="#another-target"><div v-if="showModal"><p>Another content teleported to #another-target</p></div></teleport></div>
</template>

确保在 HTML 文件中添加 #another-target 节点：

<body><div id="app"></div><div id="another-target"></div>
</body>

条件 Teleport

有时，你可能需要根据条件来决定是否使用 teleport。你可以通过条件渲染来实现这一点：

<template><div id="app"><button @click="showModal = true">Open Modal</button><component :is="useTeleport ? 'teleport' : 'div'" to="body"><modal v-if="showModal" @close="showModal = false"><h1>Conditionally Teleported</h1></modal></component></div>
</template><script>
import Modal from './components/Modal.vue';export default {name: 'App',components: {Modal},data() {return {showModal: false,useTeleport: true  // 条件决定是否使用 teleport};}
};
</script>

与 Vue Router 配合

当使用 Vue Router 时，你可能需要在不同的路由间共享某些内容（如模态框）。你可以利用 Teleport 实现这一点，而无需在每个路由组件中重复代码。例如：

<template><div id="app"><router-view></router-view><teleport to="body"><modal v-if="showModal" @close="showModal = false"><h1>Modal shared across routes</h1></modal></teleport></div>
</template><script>
import Modal from './components/Modal.vue';export default {name: 'App',components: {Modal},data() {return {showModal: false};},methods: {openModal() {this.showModal = true;},closeModal() {this.showModal = false;}}
};
</script>

然后在路由组件中调用 openModal 方法来打开模态框：

<template><div><h1>Home Page</h1><button @click="$emit('openModal')">Open Modal</button></div>
</template><script>
export default {name: 'Home',methods: {openModal() {this.$emit('openModal');}}
};
</script>

确保在 App.vue 中监听 openModal 事件：

<template><div id="app"><router-view @openModal="openModal"></router-view><teleport to="body"><modal v-if="showModal" @close="closeModal"><h1>Modal shared across routes</h1></modal></teleport></div>
</template><script>
import Modal from './components/Modal.vue';export default {name: 'App',components: {Modal},data() {return {showModal: false};},methods: {openModal() {this.showModal = true;},closeModal() {this.showModal = false;}}
};
</script>