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’,}
問題解答
回答1:找出了方法就是加上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就解決了那個報錯問題
回答2:我是用WEBPACK解決的??梢詤⒖次业捻椖?。
相關文章:
1. 關于docker下的nginx壓力測試2. docker - 各位電腦上有多少個容器???容器一多,自己都搞混了,咋辦呢?3. mac里的docker如何命令行開啟呢?4. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””5. nignx - docker內nginx 80端口被占用6. docker容器呢SSH為什么連不通呢?7. dockerfile - 我用docker build的時候出現下邊問題 麻煩幫我看一下8. docker-compose 為何找不到配置文件?9. docker start -a dockername 老是卡住,什么情況?10. angular.js使用$resource服務把數據存入mongodb的問題。

網公網安備