vue中用饿了么tabs组件切换component标签组件 component组件嵌套，导致页面重复渲染

最新推荐文章于 2024-03-19 11:36:51 发布

柠檬不喝柠檬茶

最新推荐文章于 2024-03-19 11:36:51 发布

阅读量2.3k

点赞数

分类专栏： vue问题解决文章标签： vue.js 前端 es6

原文链接：https://blog.csdn.net/xiaohuli_hyr/article/details/106325947

版权

vue问题解决专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

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

错误代码：

<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。
————————————————
版权声明：本文为CSDN博主「foxhuli229」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaohuli_hyr/article/details/106325947