Vue <Teleport> 组件
示例
使用内置的 <Teleport>
组件将 <div>
元素移动到 <body>
的根部
<Teleport to="body">
<div id="redDiv">Hello!</div>
</Teleport>
运行示例 »
更多示例请参见下方。
定义和用法
内置的 <Teleport>
组件与 to
prop 一起使用,可以将元素从当前 HTML 结构移出,并放入已挂载到 DOM 中的另一个元素。
要查看元素是否真的通过 <Teleport>
组件移动到其他位置,您可能需要右键单击并检查页面。
传送的元素会出现在目标位置中已挂载的其他元素之后。因此,如果多个元素被传送到同一个目标位置,则最后传送的元素将出现在其他已传送元素下方。
如果使用 <Teleport>
来移动组件,那么与该组件的通信(通过 provide/inject 或 prop/emit)仍然像以前一样工作,就好像组件没有被移动一样。
此外,如果一些内容通过 <Teleport>
被移出组件,Vue 会确保组件在 <script>
和 <style>
标签中的相关代码仍然对被移动的内容有效。请参见下面的示例。
Props
Prop | 描述 | |
---|---|---|
to | 必需。字符串。指定目标的名称 | 运行示例 » |
disabled | 可选。布尔值。指定是否应禁用 teleport 功能 | 运行示例 » |
更多示例
示例
即使 <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
prop 通过一个按钮切换,以便 <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 Teleport