建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下Vue.js動態(tài)組件模板的實例分析，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
組件并不總是具有相同的結(jié)構(gòu)。有時需要管理許多不同的狀態(tài)。異步執(zhí)行此操作會很有幫助。
實例：
組件模板某些網(wǎng)頁中用于多個位置，例如通知，注釋和附件。讓我們來一起看一下評論，看一下我表達(dá)的意思是什么。
評論現(xiàn)在不再僅僅是簡單的文本字段。您希望能夠發(fā)布鏈接，上傳圖像，集成視頻等等。必須在此注釋中呈現(xiàn)所有這些完全不同的元素。如果你試圖在一個組件內(nèi)執(zhí)行此操作，它很快就會變得非?；靵y。
處理方式
我們該如何處理這個問題？可能大多數(shù)人會先檢查所有情況，然后在此之后加載特定組件。像這樣的東西：
// comment text
...
// open graph image
但是，如果支持的模板列表變得越來越長，這可能會變得非?；靵y和重復(fù)。在我們的評論案例中 - 只想到支持Youtube，Twitter，Github，Soundcloud，Vimeo，F(xiàn)igma的嵌入......這個列表是無止境的。
動態(tài)組件模板
另一種方法是使用某種加載器來加載您需要的模板。這允許你編寫一個像這樣的干凈組件：
// comment text
...
// type can be 'open-graph', 'image', 'video'...
看起來好多了，不是嗎？讓我們看看這個組件是如何工作的。首先，我們必須更改模板的文件夾結(jié)構(gòu)。
就個人而言，我喜歡為每個組件創(chuàng)建一個文件夾，因為可以在以后添加更多用于樣式和測試的文件。當(dāng)然，您希望如何構(gòu)建結(jié)構(gòu)取決于你自己。
接下來，我們來看看如何
那么這里發(fā)生了什么？默認(rèn)情況下，Vue.js支持動態(tài)組件。問題是您必須注冊/導(dǎo)入要使用的所有組件。
這里沒有任何東西，因為我們想要動態(tài)地使用我們的組件。所以我們可以做的是使用Webpack的動態(tài)導(dǎo)入。與計算值一起使用時，這就是魔術(shù)發(fā)生的地方 - 是的，計算值可以返回一個函數(shù)。超級方便！
computed: {
loader() {
if (!this.type) {
return null
}
return () => import(`templates/${this.type}`)
},
},安裝我們的組件后，我們嘗試加載模板。如果出現(xiàn)問題我們可以設(shè)置后備模板。也許這對向用戶顯示錯誤消息很有幫助。
mounted() {
this.loader()
.then(() => {
this.component = () => this.loader()
})
.catch(() => {
this.component = () => import('templates/default')
})
},看完了這篇文章，相信你對Vue.js動態(tài)組件模板的實例分析有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！
本文題目：Vue.js動態(tài)組件模板的實例分析-創(chuàng)新互聯(lián)
文章來源：http://www.dlmjj.cn/article/goojo.html
