Teleport
为什么要使用 Teleport? 老规矩，先来看一个需求
实现一个全局的modal组件，在所有组件通用
Modal.vue
代码语言：javascript复制<template>
<div class="modal">
确定要删除吗？
</div>
<div class="cover">
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name:"Modal"
})
</script>
<style>
.modal{
position: relative;
z-index: 2;
width:200px;
height: 200px;
line-height: 200px;
background: #fff;
color:rgb(98, 89, 89);
text-align:center;
margin: 0 auto;
border: 1px solid black;
}
.cover{
display: block;
content: "222";
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
top:0;
left:0;
z-index: 1;
}
</style>在Hello组件
代码语言：javascript复制<template>
<div class="hello">
<h1>{{ msg }}</h1>
<modal />
</div>
</template>在App.vue使用
代码语言：javascript复制<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<h1>X:{{x}}</h1>
<h2>Y:{{y}}</h2>
<hello></hello>
</div>
</template>实际渲染的HTML结构
我们发现如下问题 1.Modal被包含在其他组件中，容易造成干扰（如果要控制Modal的位置，则Modal以上的组件不能出现定义，不然会造成干扰，Modal应该相对于body定位的） 2.导致DOM结构混乱，这样的Modal组件应该属于body的直属子组件 3.样式在其他组件中，导致样式混乱。
Modal组件理想存放的位置应该是body的直属子组件 怎么实现这个需求？？？ 这里就要用到Teleport 用法也很简单
修改hello组件
代码语言：javascript复制<template>
<div class="hello">
<h1>{{ msg }}</h1>
<teleport to="#modal">
<modal />
</teleport>
</div>
</template>to表示，组件传送到的某个节点
得到如下DOM结构
