vue3学习笔记二：传送门Teleport的使用

1、ModelButton.vue

<template>
    <div>
        <button @click="modelOpen=true">弹出一个模态窗口</button>
    </div>
    <!-- 挂载在body上 -->
    <teleport to="body">
        <div v-if="modelOpen" class="modal">
            <div>
                这是一个弹窗
                我的父元素是body
                <button @click="modelOpen=false">关闭</button>
            </div>
        </div>
    </teleport>
</template>
<script>
import { ref } from 'vue'
export default {
    setup() {
        const modelOpen = ref(true)
        return{
            modelOpen
        }
    },
}
</script>
<style  scoped>

</style>

2、use.vue

<template> 
    <model-button></model-button>
</template>
<script>
import ModelButton from './ModelButton.vue'
export default {
  components:{
    ModelButton
  },
  set
}
</script>

3、将model挂载在body下，与app同级