javascript - vue使用異步組件結合is按需加載組件的問題

問題描述

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

點擊的時候去加載異步組件（可以載入組件），但報下面的錯

[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’,}

問題解答

找出了方法就是加上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就解決了那個報錯問題

我是用WEBPACK解決的?？梢詤⒖次业捻椖?。