Teleport 可以将我们模板有些与模板有关联的逻辑代码（只是逻辑有关）移动到DOM 中 Vue app 之外的其他位置，（根据DOM 元素的id进行和Teleport的to属性对应）
比如，模态框组件，模态框的逻辑存在于组件中，但是模态框的快速定位就很难通过 CSS 来解决，或者需要更改组件组合。
使用Teleport将模态框的一部分代码移动
// 父组件的代码
<template>
<div>
父组件
<child />
</div>
</template>
<script>
import { defineComponent } from "vue";
import child from "./teleportChild.vue";
export default defineComponent({
name: "",
components: {
child,
},
});
</script>
<style scoped></style>
// 子组件 child代码
//teleport属性值 to="body" 等于挂载到body DOM 上（目标元素）
<template>
<div>
<button @click="isShow = true">点击我显示弹出框</button>
<teleport to="body">
<div v-show="isShow">
我是弹出框
<button @click="isShow = false">点我关闭弹出框</button>
</div>
</teleport>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "teleportChild",
setup() {
const isShow = ref(false);
return { isShow };
},
};
</script>
<style scoped></style>
