前菜

为了很好的讲解传送门的意思，我们需要用一个常用的例子去学，那就是弹出层会用到的透明蒙版。

<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>

盒子样式和蒙版样式都是绝对定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jrDMWI3d-1652320568201)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86dc0b41275d47b0970657f4ba04a9c2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

由于我们在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属性值确定要传送的标签。

原文链接：https://blog.csdn.net/qq_53225741/article/details/124724954