服了，记一下v-show不生效的问题_vue 遍历组件 v-show效果没有实现出来

背景：父组件有一个tab，切换tab就切换不同的子组件

      <div class="h-full border border-color-basis p-16">
        <ChartStyle v-show="state.checkedTab == '0'" :chartConfig="chartConfig" :drawBatteryTests="drawBatteryTests" />
        <AxisAndScaleLines v-show="state.checkedTab == '1'" />
        <Scale v-show="state.checkedTab == '2'" />
        <Grid v-show="state.checkedTab == '3'" />
      </div>

如上所示：通过v-show控制四个子组件的显示和隐藏，但是我加上去怎么都不生效，F12查看元素发现子组件并没有各自的父元素，而且也没有display:none这个样式（v-show底层是通过display:none控制元素的显示隐藏的）

结果真的是：由于我的子组件没有一个根节点，也就是在template区域直接就写了各个小部分的节点，没有一个大的div（这就可能造成各个小部分的display:flex和v-show的display:none造成冲突，导致v-show失效） ，直接在各个子组件加上根节点就可以了

所以，在快乐敲代码的过程中也需要注意代码的规则，不该省的千万不要省啊！！！！！还有就是注意属性display和v-show是否冲突