teleport 传送门
这里提一下传送，这个传送就是我可以把teleport标签通过to="名称"放在我想要放在的标签里面
看个例子：
Home.vue
<template> <div id="one"> <h3>第一个div</h3> </div> <div class="two"> <h3>第二个div</h3> </div> <ModalButton></ModalButton> </template> <script> import { defineComponent } from "vue"; import ModalButton from '../components/ModalButton.vue'; export default defineComponent({ components: { ModalButton, }, setup() { return {}; }, }); </script>
子组件ModalButton.vue
<template> <div> <button @click="modalOpen = true">弹出框</button> <teleport to="body"> <div v-if="modalOpen" class="modal"> <div> 传送 <button @click="modalOpen = false">关闭</button> </div> </div> </teleport> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { const modalOpen = ref(false); return { modalOpen }; }, }); </script> <style scoped> .modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 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: space-around; background-color: white; width: 350px; height: 300px; padding: 5px; } </style>
我们来具体看一下效果：
把to中的body替换成#one
再看效果:
最后再尝试把to中的#one替换成.two,可想而知效果是一致的
效果：
注意：这个传送是需要通过找到上方层级的盒子才能进行传送
如果写成这样：(是进行不了传送的)
<template> <ModalButton></ModalButton> <div id="one"> <h3>第一个div</h3> </div> <div class="two"> <h3>第二个div</h3> </div> </template>
为什么我们需要 Teleport
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”。
场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多
原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难
另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值
这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它
