javascript - vue使用非同步元件結合is按需載入元件的問題

Question

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane v-for="item in menu" :label="item.name" :name="item.name" :key="item" :component="item.component"><component :is="item.component"></component></el-tab-pane>
    </el-tabs>

methods: {
    handleClick (tab, event) {
        // 异步加载组件
        let getCompoentIndex = this.menu.findIndex(x => x.name === tab.name)
        let component = this.menu[getCompoentIndex].component
        if (!this.menu[getCompoentIndex].loading) {
          this.menu[getCompoentIndex].loading = true
          Vue.component(component, function (resolve, reject) {
            setTimeout(function () {
              require([`./${component}.vue`], resolve)//比如 abc.vue
            }, 1000)
          })
        }
      }
  }

點擊的時候去載入非同步元件（可以載入元件），但封包下面的錯誤

[Vue warn]: Unknown custom element: <abc> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

嘗試為abc元件加上name還是報這樣的錯，有人知道怎麼解決嗎？
abc.vue

export default {
    name: 'abc',
}

Answer 1

找出了方法就是加上if判斷

<el-tab-pane v-for="item in menu" :label="item.name" :name="item.name" :key="item" :component="item.component"><component :is="item.component" v-if='flag'></component></el-tab-pane>

data:()=>({
    flag: false
})

然後點擊的時候把flag設為true就解決了那個報錯問題

Answer 2

我是用WEBPACK解決的。
可以參看我的項目。