菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue 教程

Vue 首页 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue:为什么、如何以及设置 Vue:第一个 SFC 页面 Vue:组件 Vue:Props Vue:v-for 组件 Vue:$emit() Vue:Fallthrough Attributes Vue:Scoped Styling Vue:本地组件 Vue:Slots Vue:v-slot Vue:Scoped Slots Vue:动态组件 Vue:Teleport Vue:HTTP 请求 Vue:Template Refs Vue:生命周期钩子 Vue:Provide/Inject Vue:路由 Vue:表单输入 Vue:动画 Vue:带 v-for 的动画 Vue:构建 Vue:Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持