vue中component组件嵌套，导致页面重复渲染，重复请求的bug

本文链接：https://blog.youkuaiyun.com/xiaohuli_hyr/article/details/106325947

本文探讨了在Vue中使用element-ui的tabs组件时，因组件嵌套导致的页面重复渲染和请求问题。通过分析v-for循环下component的创建机制，指出了问题根源，并提供了解决方案，即自定义tabs组件以避免重复创建组件和请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中component组件嵌套，导致页面重复渲染，重复请求的bug

因详情页面，有多个tab选项卡考虑页面多处重复使用，而且有多个页面组成，最终决定使用组件方式来引用页面。

因项目采用的UI组件是 element-ui，刚好看到有一个样式很类似于 tab选项卡，就采用了 element的 tabs组件，可是没想到问题就是出现这儿。

![效果图](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2do 在这里插入图片描述

错误代码：

<el-tabs class="header-tabs" v-model="activeName" @tab-click="handleClick">
   <el-tab-pane
     v-for="item of tabs"
     :key="item.id"
     :label="item.label"
     :name="item.id"
     :component="item.component"
     lazy
     >
      <keep-alive exclude="ContentManage">
          <component :is="currentComponent" :customeroid="agencyid"></component>
      </keep-alive>
     </el-tab-pane>
</el-tabs>

因为上述采用了 tabs选项卡，而且也使用 v-for循环（没办法，主要是 tabs是动态的），导致每个页面不仅没有办法缓存，反而一直重复发送请求。自己百度了好久，最后没办法寻求帮助，在大佬们远程帮助下最终发现的是 tabs下的 v-for导致。

因为 component 写在v-for循环中，每次循环都会创建一个对象，导致创建很多的组件，点击一次tabs 循环后的所有的 component都发送了请求，每次点击一次后，都会减少一次请求（因为 keep-alive缓存的问题）。

最终解决的方法，不在 element-ui的 tabs组件，自己手写页面，反正样式不复杂。

正确代码

<ul class="tabs-ul">
    <li
        v-for="(item) in currentTabs"
        :key="item.id"
        :class="{ active: tabSelect === item.id }"
        @click.prevent="changetabs(item.id)"
        >
        {{ item.label }}
    </li>
</ul>
<keep-alive exclude="ContentManage">
    <component :is="currentComponent" :customeroid="agencyid"></component>
</keep-alive>

这样的就可以避免创建多个组件，从而不在出现重复发送请求的bug。