javascript - vue utilise des composants asynchrones combinés pour charger des composants à la demande.

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)
          })
        }
      }
  }

Lorsque vous cliquez dessus, le composant asynchrone est chargé (le composant peut être chargé), mais l'erreur suivante est signalée

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

J'ai essayé d'ajouter un nom au composant abc et j'ai toujours cette erreur. Quelqu'un sait-il comment la résoudre ?
abc.vue

export default {
    name: 'abc',
}

Answer 1

La méthode que j'ai trouvée est d'ajouter si jugement

<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
})

Ensuite, définissez le drapeau sur true lorsque vous cliquez pour résoudre le problème d'erreur

Answer 2

Je l'ai résolu en utilisant WEBPACK.
Vous pouvez consulter mes projets.