<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',
}
找出了方法就是加上if判斷
然後點擊的時候把flag設為true就解決了那個報錯問題
我是用WEBPACK解決的。
可以參看我的項目。