Vue <Teleport> 组件

示例

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

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

运行示例 »

请参阅下面的更多示例。

定义和用法

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

看到一个元素实际上已经被移动到某个地方了<Teleport>组件，您可能需要右键单击并检查页面。

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

如果<Teleport>用于移动组件，通过提供/注入或道具/发射与该组件之间的通信仍然像以前一样工作，就好像组件没有被移动一样。

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

道具

Prop	Description
to	Required. String. Specify the name of the target	Run Example »
disabled	Optional. Boolean. Specify if the teleport functionality should be disabled	Run Example »

更多示例

示例

相关代码来自<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 <Teleport> 组件

示例

定义和用法

道具

更多示例

示例

示例

相关页面