### 一、Vue3.x Teleport、 Vue3.x中的組件模板屬于該組件，有時候我們想把模板的內容移動到當前組件之外的DOM 中，這個時候就可以使用 Teleport。 表示teleport內包含的內容顯示到body中 ~~~ <teleport to="body"> 內容 </teleport> ~~~ ~~~ <teleport to="#app"> 內容 </teleport> ~~~ ### 二、使用Teleport實現一個模態對話框的組件 **Modal.vue** ~~~ <template> <teleport to="body"> <div class="model-bg" v-show="visible"> <div class="modal-content"> <button class="close" @click="$emit('close-model')">X</button> <div class="model-title">{{title}}</div> <div class="model-body"> <slot> 第一個對話框 </slot> </div> </div> </div> </teleport> </template> <script> export default { props: ["title", "visible"] } </script> <style lang="scss"> .model-bg { background: #000; opacity: 0.7; width: 100%; height: 100%; position: absolute; top: 0px; } .modal-content { width: 600px; min-height: 300px; border: 1px solid #eee; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; .model-title { background: #eee; color: #000; height: 32px; line-height: 32px; text-align: center; } .model-body { padding: 40px; } .close { position: absolute; right: 10px; top: 5px; padding: 5px; border: none; cursor: pointer; } } </style> ~~~ Home.vue使用model ~~~ <template> <div class="home"> <button @click="isVisible=true">彈出一個模態對話框</button> <modal :visible="isVisible" title="用戶登錄" @close-model="isVisible=false"></modal> </div> </template> <script> import Modal from "./Modal" export default { data() { return { isVisible: false } }, components: { Modal } } </script> <style lang="scss"> .home { position: relative; } </style> ~~~