javascript - vue使用異步組件結(jié)合is按需加載組件的問(wèn)題
問(wèn)題描述
<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) })} } }
點(diǎn)擊的時(shí)候去加載異步組件(可以載入組件),但報(bào)下面的錯(cuò)
[Vue warn]: Unknown custom element: <abc> - did you register the component correctly? For recursive components, make sure to provide the 'name' option.
嘗試為abc組件加上name還是報(bào)這樣的錯(cuò),有人知道怎么解決嗎?abc.vue
export default { name: ’abc’,}
問(wèn)題解答
回答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})
然后在點(diǎn)擊的時(shí)候把flag設(shè)置為true就解決了那個(gè)報(bào)錯(cuò)問(wèn)題
回答2:我是用WEBPACK解決的。可以參看我的項(xiàng)目。
相關(guān)文章:
1. python - 數(shù)據(jù)與循環(huán)次數(shù)對(duì)應(yīng)不上2. node.js - nodejs開(kāi)發(fā)中常用的連接mysql的庫(kù)3. mysql - jdbc的問(wèn)題4. python - 我在使用pip install -r requirements.txt下載時(shí),為什么部分能下載,部分不能下載5. 視頻文件不能播放,怎么辦?6. mysql - 分庫(kù)分表、分區(qū)、讀寫(xiě)分離 這些都是用在什么場(chǎng)景下 ,會(huì)帶來(lái)哪些效率或者其他方面的好處7. windows7 ping不通虛擬機(jī)VMware上的linux(ubuntu)的ip8. 網(wǎng)頁(yè)爬蟲(chóng) - python 爬取網(wǎng)站 并解析非json內(nèi)容9. python - 編碼問(wèn)題求助10. mysql - 如何減少使用或者不用LEFT JOIN查詢?
