vue+tabs的组件切换功能

1. 每个tab都是一个组件
2. 每次切换tab重新渲染对应的tab组件(使用v-if控制)
 

<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.label">
        <!-- v-if控制tab切换时渲染对应的子组件 -->
        <component :is="item.name" :key="item.name" v-if="activeName === item.name"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import one from './components/one'
import two from './components/two'

export default {
  components: {
    one,
    two
  },
  data() {
    return {
      activeName: 'one',
      tabList: [
        {
          label: 'tabOne',
          name: 'one'
        },
        {
          label: 'tabTwo',
          name: 'two'
        },
      ]
    }
  }
}
</script>