组件之对页面分层

页面切换

场景1：弹窗弹出一个 新页面组件浮动上层

里面内容是以dialog元素开始
通过链接或者按钮 只需要控制B组件:visible显示或隐藏 来进行页面浮动弹窗至最高优先级

场景2：直接切换 让A内容变成B

通过:visible 控制A B之间切换

判断思路

1.通过按钮或者链接 切换或弹出一个页面的时候 这个组件一定是与按钮在同一层级的
2.弹出直接控制页面组件弹出控制 毕竟属于弹出层面 浮动了一层显示
3.切换页面 就控制组件在兄弟层面互相限制 让A显示就得让B不显示

开发前 先把 组件的 层级关系理清楚

<template>
    
        <组件A />
        <组件B />
        <按钮层1 事件控制组件B显示弹出/>
   
</template>

组件B
<template>
  
    <el-tabs v-model="activeName">
      <el-tab-pane >
        <组件B1 v-if="" />
        <组件B2 v-if="" />
      </el-tab-pane>
      <el-tab-pane >
        <组件B3 />
      </el-tab-pane>
      按钮层2 事件控制组件1或者组件2只能显示条件满足的1个
    </el-tabs>
 
</template>