問題描述

<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].componentif (!this.menu[getCompoentIndex].loading) { this.menu[getCompoentIndex].loading = true Vue.component(component, function (resolve, reject) { setTimeout(function () { require([`./${component}.vue`], resolve)//比如 abc.vue }, 1000) })} } }

點(diǎn)擊的時(shí)候去加載異步組件（可以載入組件），但報(bào)下面的錯(cuò)

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

嘗試為abc組件加上name還是報(bào)這樣的錯(cuò)，有人知道怎么解決嗎？abc.vue

export default { name: ’abc’,}

問題解答

找出了方法就是加上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})

然后在點(diǎn)擊的時(shí)候把flag設(shè)置為true就解決了那個(gè)報(bào)錯(cuò)問題

我是用WEBPACK解決的。可以參看我的項(xiàng)目。