vue component标签_vue标签页(Tabs)最佳实践

vue中Tabs的各种花式写法，官网也没有也给最佳实践。在实时性比较高的一些系统中，组件切换时可能数据已经更新了，这时候就需要组件动态载入。

<template>
  <div class="container">
    <el-tabs v-model="active">
      <el-tab-pane
        v-for="item in tabs"
        :key="item.id"
        :label="item.title"
      >
        <component
            v-bind:is="active === item.id ? item.component : false"
          ></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'demo',
  components: {},
  props: {},
  data () {
    return {
      active : 0,
      tabs: [{
          title: '标签a',
          id: 0,
          component: () => import('./components/a')
        }, {
          title: '标签b',
          id: 1,
          component: () => import('./components/b')
      }, {
          title: '标签c',
          id: 2,
          component: () => import('./components/c')
      }, {
        title: '标签d',
        id: 3,
        component: () => import('./components/d')
      }]
    }
  }
}
</script>

写 Vue一个多月了，相比React，vue很多功能的实现都非常简单，开发速度高效。