![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/f0ebec3e34ac4305979f3c96634a7687.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在上一篇的文章中，我们了解了vue高级语法中的自定义指令，本章节中将会和大家一起学习vue里面的传送门的内容。
前菜
为了很好的讲解传送门的意思，我们需要用一个常用的例子去学，那就是弹出层会用到的透明蒙版。
<script> const app = Vue.createApp({ data(){ return { show: false } }, methods: { handleClick(){ this.show = !this.show } }, template: ` <div class="box"> <button @click="handleClick">点击</button> <div class="mask" v-if="show" @click="handleClick"></div> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
- 定义一个模板，里面有一个盒子，盒子里面包裹了一个按钮和一个蒙版
- 点击按钮时蒙版显示，点击蒙版时蒙版消失
<style> .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: #f4ef4e; } .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; } </style> 复制代码
- 盒子样式和蒙版样式都是绝对定位
由于我们在tempalte下面只定义了一个根标签，而蒙版层又在根标签下，那么蒙版的绝对定位就会跟着根标签走了。
从而出现蒙版层并没有完全遮蔽整个页面，而是只遮住了它的根标签而已。
为了能够让蒙版遮住整个页面，vue3给我们提供了传送门的功能.
传送门
传送门就是通过teleport标签来实现这个标签下面的元素可以传送到其他标签下面。
template: ` <div class="box"> <button @click="handleClick">点击</button> <teleport to="body"> <div class="mask" v-if="show" @click="handleClick"></div> </teleport> </div> ` 复制代码
- 通过
teleport传送门标签将蒙版层包裹住，然后在标签上的to属性传送到body标签下面。
网络异常，图片无法展示
|
网络异常，图片无法展示
|
通过浏览器控制可以看到原来蒙版层标签的地方出现了teleport的注释代码，而蒙版层标签则跑到body标签下面了。
除了可以放到body标签下面，还可以放到其他标签层级上的。
<body> <div id="root"></div> <div id="hello"></div> </body> 复制代码
- 在
body标签下面新建一个id为hello的div标签
template: ` <div class="box"> <button @click="handleClick">点击</button> <teleport to="#hello"> <div>Hello</div> </teleport> </div> ` 复制代码
- 将
teleport标签上的属性to的值改为#hello即可
to后面的参数可以和写样式一样通过#找到某个标签上的id
网络异常，图片无法展示
|
总结
本篇章节主要讲解了传送门teleport标签的使用方法，它可以把某个根标签下面的标签传送到其他标签下面渲染出来，通过teleport标签上的to属性值确定要传送的标签。
