vue（十二）——vue3新特性之Teleport

teleport是什么？

teleport其实就是vue3新增的一个内置组件，其实就是一个新增标签。

teleport的作用？

官方解释：将其插槽内容渲染到 DOM 中的另一个位置。

简单来说就是将dom节点挂载到你指定的位置。

遮挡层案例举例

遮挡层组件：

<template>
        <div class="m-bg">
            <div class="m-title">

            </div>
            <div class="m-body">

            </div>
        </div>
</template>
<script>
export default {
    name:"myModul"
}
</script>

<style scoped>
    .m-bg{
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: .7;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

父组件调用：

<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1> -->
    <div>
      {{name}}---{{age}}
    </div>
      <mymodul></mymodul>
  </div>
</template>

<script>
// import myMixin from "../mixins/mixins"
import mymodul from './myModul'
export default {
  // mixins:[myMixin],//混入写法
  name: 'HelloWorld',
  props: {
    // msg: String
  },
  components:{
    mymodul
  }

}
</script>


<style scoped>
  .hello{
    /* position: relative; */
  }

</style>

此时结果是一个很正常的结果： 

但是我们把父组件的绝对定位打开后的结果：

 出现问题：如果父组件需要用到相对定位，这时我们的遮挡层还怎么实现？

使用teleport解决上述问题：

遮挡层组件代码：

<template>
    <teleport to='body'>
        <div class="m-bg">
            <div class="m-title">

            </div>
            <div class="m-body">

            </div>
        </div>
    </teleport>
</template>
<script>
export default {
    name:"myModul"
}
</script>

<style scoped>
    .m-bg{
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: .7;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

结果：

结论： 

这里的 <teleport to='body'></teleport>意思就是将teleport标签里面的内容全部挂载到body上面。

to这个属性不仅可以使用body这种标签，也可以使用#app这种id。