Teleport传送组件

Teleport是Vue3.0新增的一个内置组件，这个东西可以将我们的模板渲染至指定的一个DOM节点，让他不受这个父级的style一个影响

当我们子组件的样式设置的position: absolute;,会受到父组件style的影响，当父组件不设置position: relative;，子组件就相当于body去做的定位，设置了就相当于父组件的位置做定位；这里用css的基础来说做一个比喻；

当子组件不想受父组件样式的影响，这时候就可以用V3的传送组件Teleport,把子组件放入即可

<template>
  <div class="parent">
    春风吹又生
    <Teleport>
      <SyncVue></SyncVue>
    </Teleport>
  </div>
</template>
<script setup lang="ts">
import SyncVue from './components/Dialog/index.vue'
</script>

to属性

Teleport的to属性，当没有使用 Teleport 包裹的时候，子组件还是在.parent下面的一个子级，加上Teleport的就可以任意传送到自己想要的位置，使用to 属性就可以了，可以接收各种选择器，比如 Id，Class，还有元素选择器等,基本常用的选择器都可以接收

这里 to="body",就会把子组件传送到 body 里面，就不会在父组件的parent下面了，这就是Teleport的一个妙用

    <Teleport to="body">
      <SyncVue></SyncVue>
    </Teleport>

disabled

disabled 接收true和false，默认是false，设置true，to属性就不起作用，可以动态的控制disabled属性来控制to的显示和隐藏

    <Teleport :disabled="true" to="body">
      <SyncVue></SyncVue>
    </Teleport>

Vue3的传送组件

Teleport传送组件

to属性

disabled