vue3__Teleport
2023-12-31 21:14:44
<Teleport>
?是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。基本用法:
有时我们可能会遇到这样的场景:一个组件模板的一部分在逻辑上从属于该组件,但从整个应用视图的角度来看,它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。
这类场景最常见的例子就是全屏的模态框。理想情况下,我们希望触发模态框的按钮和模态框本身是在同一个组件中,因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。
注意:传送的位置必须在被传送的dom之前渲染完毕
?父
<template>
<div class="home">
<div class="main">
我是main
</div>
<div id="container">
我是container
</div>
<A></A>
</div>
</template>
<script setup>
import A from '../components/A.vue'
let str = ref('xxx')
</script>
<style lang="scss">
.home{
font-size: 32px;
line-height: 50px;
}
</style>
?子
<template>
<div class="A">
<h1>A组件</h1>
<div class="aaa">
</div>
<teleport to=".main">
<div>
这是传送
</div>
</teleport>
<teleport to=".aaa">
<div>
这是传送2
</div>
</teleport>
</div>
</template>
<script setup>
</script>
<style lang="scss">
.A{
font-size: 26px;
}
</style>
文章来源:https://blog.csdn.net/slom_fxt/article/details/135215007
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!