鍍金池/ 問答/HTML/ vue父組件如何動態(tài)注冊子組件

vue父組件如何動態(tài)注冊子組件

vue的組件一般的都是import進來，在components注冊，然后就可在父組件里面使用了，但是現(xiàn)在項目的組件是從后臺拿到的組件名稱，然后if else判斷是否有import這個組件，最后生成。前期還好就3,4個組件，但是后來越來越多。。。if else越寫越長，然后我在想有沒有那種動態(tài)注冊組件的方法，官網(wǎng)看了，網(wǎng)上找了一圈，曾經(jīng)有人這么寫

/**
*@desc 統(tǒng)一加載注冊組件資源*/
registerComponent(templateName){
 Vue.component(templateName,    require("./../dashComponent/"+templateName+".vue"));
},

注冊方案

this.registerComponent(this.layout[index].component);

這樣就需要組件名稱和后臺給的組件名稱相對應(yīng)，自己嘗試了以后發(fā)現(xiàn)并不行。。。。

最后渲染出來的dom

clipboard.png
控制臺也提示

clipboard.png

clipboard.png

這個應(yīng)該是沒有注冊成功吧，之前有同學遇到過這種情況嘛？

回答
編輯回答
遲月

https://www.cnblogs.com/stone...

2017年9月18日 02:07
編輯回答
情未了

Vue.component(templateName,require(./heNan/${templateName}.vue).default);可以這樣用，但是提倡使用import的

2017年2月4日 05:52
編輯回答
冷咖啡

沒有遇到這個情況,如果是為了優(yōu)化組件加載性能的話,可以考慮按需加載

2018年3月24日 19:57
編輯回答
夢一場

注冊函數(shù)

/**
*@desc 統(tǒng)一加載注冊組件資源
*@return {Promise}
*/
registerComponent(templateName){
  return import(`./../dashComponent/${templateName}.vue`).then((component) => {
    return Vue.extend(component)
  })
}

組件動態(tài)掛載

this.registerComponent(templateName).then((Component) => {
    new Component({el: yourNeedEl})
})

或者這樣

registerComponent(templateName){
  return import(`./../dashComponent/${templateName}.vue`).then((component) => {
    return Vue.component(templateName, component)
  })
}
2018年4月14日 09:58