【深入vue3 新特性: teleport 使用与讲解】

1. teleport 是内置组件，可以直接在模板中使用，无需注册。
2. 可以被打包工具 tree-shake。所以它们只会在被使用的时候被引入。
3. 需要直接主动访问(获取)它们的场景，也可以将它们显性导入。

---

• props
  • to - string  ：必传
    • 挂载的目标，只能是父级标签。兄弟、子级都会报错。
    • 挂载目标必须是有效的查询选择器或 HTMLElement

  • disabled - boolean  ：非必传

    • 是否禁用。true则挂载到目标节点下，false为当前位置。

    • 动态变化 disabled 值时，只是位置会变动，内容并不会销毁重新渲染！

<template>
 <teleport to="body" :disabled="toTarget">
  <div v-if="modalOpen" class="modal">
    <div>
      {{ stateSount }}--{{ jisuanReactive }}
      I'm a teleported modal!
      (My parent is "body")
      <button @click="modalOpen = false">Close</button>
    </div>
  </div>
 </teleport>
</template>
<button  @click="toTarget = !toTarget">toTargetBtn</button>

<button  @click="modalOpen = true">Open full screen modal! (With teleport!)</button>

<script setup>
import {ref} from 'vue'
let toTarget = ref(true)
let modalOpen = ref(true)
</script>

---

注意：在加载 `teleport `之前，目标元素必须存在。

以下teleport例子将会报错！

<div class="guazai" v-if="showData">teleport目标元素</div>
<div>
  <teleport to=".guazai">demo</teleport>
</div>
<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
  data(){
    return {
      showData:false
    }
  },
  mounted() {
    setTimeout(() => {
      this.showData = true
    }, 1000*1);
  },
})
</script>

---

以下官方代码列举写法。但是前面说过 “ 挂载目标必须是有效的查询选择器或 HTMLElement ”

实际填h1 h2等原生标签、以及自定义的标签都是没问题的。以下应该是官方文档的一个纰漏。

<!-- 正确 -->
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

<!-- 错误 -->
<teleport to="h1" />
<teleport to="some-string" />

---

关于样式: teleport

teleport挂载的目标即使不在当前组件，scoped 内的样式在 teleport 中是生效的。

原因：scoped 生成的唯一属性会作用于 teleport 内的各元素

---

了解更多vue3单文件样式特性，可看该文章。

【深入vue3之SFC-style特性】单文件组件样式特性_lijiahui_的博客-CSDN博客