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解决的。可以参看我的项目。