近期项目业务模块较多,其中需点击首页侧边栏的菜单切换主要区域,由于大家负责侧边板块样式交互都不一样,因此使用到了传送门teleport
示例:
父页面
<div id="side-catalog"></div>
子页面
<div>主区域</div>
<teleport to="#side-catalog">
<div>侧边</div>
</teleport>
teleport标签将里面的元素挂载到其他的Dom元素上,等于指定元素的父元素
<teleport to="body"></teleport>
<teleport to=".className"></teleport>
<teleport to="#idName"></teleport>
重点:teleport to的目标是必须已存在的,如果父节点还没渲染出来就传送过去了,teleport里面的元素不会挂载上去,可给teleport加上v-if,onmounted时给值设置true