Vue <Teleport> 组件

示例

使用内置的<Teleport>组件将<div>元素移动到<body>的根目录:

<Teleport to="body">
  <div id="redDiv">Hello!</div>
</Teleport>

运行示例 »

请参阅下面的更多示例。

定义和用法

内置的 <Teleport> 组件与 to 属性一起使用，将元素移出当前 HTML 结构并移至已安装在 DOM 中的另一个元素中。

要查看元素实际上已与 <Teleport> 组件一起移动到某处，您可能需要右键单击并检查页面。

传送的元素将在已安装在目的地的其他元素之后结束。因此，如果多个元素被传送到同一目的地，则最后一个被传送的元素将最终位于其他被传送的元素下方。

如果使用 <Teleport> 来移动组件，则通过提供/注入或 prop/emit 与该组件之间的通信仍然像以前一样工作，就像组件未移动一样。

此外，如果某些内容从带有 <Teleport> 的组件中移出，Vue 会确保 <script> 和 <style> 标签中组件内的相关代码仍然适用于移动的内容。请参阅下面的示例。

Props 选项

Props 选项	描述
to	必填。字符串。指定目标名称	运行示例 »
disabled	可选。布尔值。指定是否应禁用 teleport 功能	运行示例 »

更多示例

示例

<style> 和 <script> 标签中的相关代码仍然适用于传送的 <div> 标签，即使它在编译后不再位于组件内部。

CompOne.vue:

<template>
  <div>
    <h2>组件</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>组件</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>

运行示例 »