多个 el-tabs 内显示同一组件导致请求重复加载

需求

把某页面拆分为 进行中、已完成，分为两个标签页。标签在顶部显示，下面显示对应的数据页面。

问题

如上图所示，是 el-tabs 的基础用法。如果把组件放在每个 el-tab-pane 标签内，会导致如下问题：

1. 代码重复；
2. 请求接口重复。

解决办法

尝试：把只需要请求一次的接口放在父组件中，传递数据给子组件。
缺点：需要拆分原组件，此外无法解决代码重复的问题。

另一种思路

el-tab-pane 标签内不写内容，把内容组件放在整个 el-tabs 的后方。点击标签事件切换不同的 tab，此时切换内容组件的查询参数（进行中、已完成）。

代码

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="进行中" name="ongoing" />
      <el-tab-pane label="已完成" name="done" />
    </el-tabs>
    <project-content
      ref="projectContent"
      :query-status-name="queryStatusName"
    />
  </div>
</template>

<script>
import ProjectContent from "./components/project-content.vue";

export default {
  name: "ProjectCenter",
  components: {
    ProjectContent,
  },
  data() {
    return {
      activeName: "ongoing",
      // 默认显示进行中
      queryStatusName: "ongoing",
    };
  },
  methods: {
    handleClick(tab) {
      this.queryStatusName = tab.name;
    },
  },
};
</script>

参考链接

Vue中根据不同状态切换 Tabs 标签页内容