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很多功能的實作都非常簡單，開發速度高效。