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

teleport是什么？

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

teleport的作用？

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

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

遮挡层案例举例

遮挡层组件：

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

父组件调用：

 
<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解决上述问题：

遮挡层组件代码：

<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标签里面的内容全部挂载到body上面。

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