Vue <Teleport> 组件
示例
使用内置的 <Teleport> 组件将一个 <div> 元素移动到 <body> 的根目录
<Teleport to="body">
<div id="redDiv">Hello!</div>
</Teleport>
请查看下面的更多示例。
定义和用法
内置的 <Teleport> 组件与 to 属性一起使用，将元素从当前 HTML 结构中移出并放入 DOM 中已挂载的另一个元素中。
要查看元素是否确实已使用 <Teleport> 组件移动到某个位置，您可能需要右键单击并检查页面。
传送的元素最终将位于已挂载到目标位置的其他元素之后。因此，如果多个元素传送到的目标位置相同，则最后传送的元素将位于其他传送的元素下方。
如果 <Teleport> 用于移动组件，则该组件与 provide/inject 或 prop/emit 的通信方式与以前相同，就像该组件没有被移动一样。
此外，如果某些内容使用 <Teleport> 从组件中移出，Vue 会确保组件中 <script> 和 <style> 标签中的相关代码仍然可以用于移动的内容。请查看下面的示例。
属性
| 属性 | 描述 | |
|---|---|---|
| to | 必填。字符串。指定目标名称 | 运行示例 » |
| disabled | 可选。布尔值。指定是否应禁用传送功能 | 运行示例 » |
更多示例
示例
即使 <div> 标签在编译后不再位于组件中，来自 <style> 和 <script> 标签的相关代码仍然可以用于传送的 <div> 标签。
CompOne.vue:
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<Teleport to="body">
<div
id="redDiv"
@click="toggleVal = !toggleVal"
:style="{ backgroundColor: bgColor }"
>
Hello!<br>
Click me!
</div>
</Teleport>
</div>
</template>
<script>
export default {
data() {
return {
toggleVal: true
}
},
computed: {
bgColor() {
if (this.toggleVal) {
return 'lightpink'
}
else {
return 'lightgreen'
}
}
}
}
</script>
<style scoped>
#redDiv {
margin: 10px;
padding: 10px;
display: inline-block;
}
#redDiv:hover {
cursor: pointer;
}
</style>
示例
布尔值 disabled 属性通过一个按钮进行切换，以便 <div> 元素被传送或不被传送。
CompOne.vue:
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<button @click="teleportOn = !teleportOn">Teleport on/off</button>
<Teleport to="body" :disabled="teleportOn">
<div id="redDiv">Hello!</div>
</Teleport>
</div>
</template>
<script>
export default {
data() {
return {
teleportOn: true
}
}
}
</script>
<style scoped>
#redDiv {
background-color: lightcoral;
margin: 10px;
padding: 10px;
width: 100px;
}
</style>
相关页面
Vue 教程：Vue 传送门
