一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。

前言

在上一篇的文章中，我们了解了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>

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

chrome-capture (1).gif

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

【Vue3从零开始-第五章】5-3 传送门Teleport

前言

前菜

传送门

总结