javascript - vue menggunakan komponen tak segerak digabungkan dengan adalah untuk memuatkan komponen atas permintaan.

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

Apabila diklik, komponen tak segerak dimuatkan (komponen boleh dimuatkan), tetapi ralat berikut dilaporkan

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

Saya cuba menambah nama pada komponen abc dan masih mendapat ralat ini. Adakah sesiapa tahu cara menyelesaikannya?
abc.vue

export default {
    name: 'abc',
}

Answer 1

Kaedah yang saya dapati ialah menambah jika penghakiman

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

Kemudian tetapkan bendera kepada benar apabila mengklik untuk menyelesaikan masalah ralat

Answer 2

Saya menyelesaikannya menggunakan WEBPACK.
Anda boleh menyemak projek saya.