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. nignx - docker內nginx 80端口被占用2. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””3. 關于docker下的nginx壓力測試4. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?5. mac里的docker如何命令行開啟呢?6. docker容器呢SSH為什么連不通呢?7. docker start -a dockername 老是卡住,什么情況?8. javascript - 連續點擊觸發mouseleave事件9. docker gitlab 如何git clone?10. macos - mac下docker如何設置代理

網公網安備