Elementui 中tab切换标签 动态加载组件

Question

<el-tabs v-model="tabValue" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <!-- <Basic :basic="basic"></Basic> -->
            <component :basic="basic" :is="tabChildComponent"></component>
          </el-tab-pane>
          <el-tab-pane label="项目信息" name="second">
            <!-- <Project :project="project"></Project> -->
            <component :project="project" :is="tabChildComponent"></component>
          </el-tab-pane>
          <el-tab-pane v-if="showTabPane_checkeAndService" label="环检信息" name="third">
            <!-- <RingInspection :ringInspection="ringInspection"></RingInspection> -->
            <component :ringInspection="ringInspection" :is="tabChildComponent"></component>
          </el-tab-pane>
          <el-tab-pane v-if="showTabPane_priceAndSplit" label="改价信息" name="four">
            <!-- <ChangePrice></ChangePrice>   -->
            <component :is="tabChildComponent"></component>
          </el-tab-pane>
          <el-tab-pane v-if="showTabPane_priceAndSplit" label="拆分信息" name="five"></el-tab-pane>
          <el-tab-pane v-if="showTabPane_checkeAndService" label="服务日志" name="six">
            <!-- <ServiceLog :serviceLog="serviceLog"></ServiceLog> -->
            <component :serviceLog="serviceLog" :is="tabChildComponent"></component>
          </el-tab-pane>
        </el-tabs>

const Basic = resolve => require(['./container/basic_info'], resolve)
const Project = resolve => require(['./container/project_info'], resolve)
const RingInspection = resolve =>
  require(['./container/ring_inspection'], resolve)
const ServiceLog = resolve => require(['./container/service_log'], resolve)
const ChangePrice = resolve => require(['./container/changePrice'], resolve)

handleClick(tab) {
      switch (tab.name) {
        case 'first':
          this.tabChildComponent = Basic
          break
        case 'second':
          this.tabChildComponent = Project
          break
        case 'third':
          this.tabChildComponent = RingInspection
          break
        case 'four':
          this.tabChildComponent = ChangePrice
          break
        case 'six':
          this.tabChildComponent = ServiceLog
          break
      }
    }

使用Elementui中的tab切换标签，我想实现的是当点击tab切换时，才去加载对应的组件，这个已经实现了，但是目前有个问题当我点击第二个或者后面的tab标签时，对应的组件里面的created()方法会执行5次，请问下这个是什么原因

Answer 1

因为你写了5个tabChildComponent，绑定了5次

Answer 2

<template>
  <el-tabs v-model="activeName" @tab-click="changeTab">
    <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.tabName">
      <div v-if="activeName === item.tabName" class="content-panel">
        <component :is="componentName"></component>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'applyProjPage',
  components: {
    all: resolve => require(['./components/all'], resolve),
    pass: resolve => require(['./components/pass'], resolve),
    ready: resolve => require(['./components/ready'], resolve),
    reject: resolve => require(['./components/reject'], resolve)
  },
  data() {
    return {
      tabs: [
        { tabName: 'all', label: '全部赛项', componentName: 'all' },
        { tabName: 'ready', label: '全部赛项', componentName: 'ready' },
        { tabName: 'pass', label: '全部赛项', componentName: 'pass' },
        { tabName: 'reject', label: '全部赛项', componentName: 'reject' },
      ],
      componentName: 'all',
      activeName: 'all'
    }
  },
  methods: {
    changeTab(active) {
      const tabItem = this.tabs.find(row => row.tabName === active.name)
      this.componentName = tabItem.componentName
    }
  }
}
</script>