vue(十二)——vue3新特性之Teleport
以一个简单的遮挡层案例,来学习一下teleport这个vue3新增的内纸组件。
·
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。
更多推荐
已为社区贡献3条内容
所有评论(0)