vue3中的Teleport传送门

传送门组件提供一种简洁的方式可以指定它里面内容的父元素。
使用方法：

<teleport to='body'>// to：要移动到的元素下面，
	
</teleport>

看个案例：

//子组件：
<template>
    <div>
        <button @click="modelOpen=true">弹出一个窗口</button>
        <teleport to='body'>
            <div v-if="modelOpen" class="modal">
                <div>这是一个弹窗
                    我的父元素是body
                    <button @click="modelOpen = false">关闭</button>
                </div>
            </div>
        </teleport>
    </div>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            modelOpen:true
        }
    },
  
}
</script>
<style scoped>
.modal {
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 background-color: rgba(0,0,0,.5);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.modal div {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 background-color: white;
 width: 300px;
 height: 300px;
 padding: 5px;
}

</style>

//父组件
<template>
  <h1>{{ msg }}</h1>
  <p>{{ counter }}</p>
  <p>{{ doubleCounter }}</p>
  <p>{{message}}</p>
  <p ref="desc"></p>
  <ModelButton></ModelButton>
</template>

<script>
import { reactive, computed, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
import ModelButton from './ModelButton.vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  components:{
    ModelButton
  },
  setup() {
    const {counter,doubleCounter} = user();
    const message = ref("some message");
    const desc=ref(null)
    watch(counter,(val,oldval)=>{
      const p=desc.value
      p.textContent=`from ${oldval} to ${val}`
    })
    return {counter,doubleCounter,message,desc}
  },
};
function user() {
  const obj = reactive({
    counter: 1,
    doubleCounter: computed(() => obj.counter * 2),
  });
  let timer;
  onMounted(() => {
    timer=setInterval(() => {
        obj.counter++
    }, 1000);
  });
  onUnmounted(() => {
    clearInterval()
  });
  return toRefs(obj) ;
}
</script>

并且我们是将内容插入到body下的所以标签是属于body的子级。和#app属于同一级别。