动态添加组件_使用vue.js的动态组件模板
最近剛做完建站工具，準備總結(jié)里面使用到的一些技巧，同時會做一版簡化的放在 github上。
先來一篇翻譯的文章，和我在項目中使用的動態(tài)組件思路一樣，不過缺少了演化的過程，直接給出了最終的解決方案。這篇文章給的場景也很簡單，但要了解這種思想是足夠的。之后再詳細的總結(jié)我遇到的問題和解決方案，放在更復(fù)雜的場景中。
以下是翻譯正文：
組件并不總是具有相同的結(jié)構(gòu)。有時需要管理許多不同的狀態(tài)(注：指的是根據(jù)不同狀態(tài)顯示不同組件)。異步加載組件對此操作很有幫助。
用例
在 Scrumpy 中組件用于提醒、評論和附件等多個地方。讓我們看一下評論部分，看看我要表達的是什么意思。
評論不再只是簡單的文本字段，你希望能夠發(fā)布鏈接，上傳圖片，集成視頻等等。所有這些完全不同的元素都必須在此評論中呈現(xiàn)出來。如果您試圖在一個組件中執(zhí)行此操作，它很快就會變得一團糟。
最常見的評論有鏈接、圖像和視頻
我們?nèi)绾翁幚磉@個問題?可能大多數(shù)人會判斷所有的情況，加載特定的組件，例如這樣：
class="comment">
// comment text
...
// open graph image
v-if="link.type === 'open-graph'" />
// regular image
v-else-if="link.type === 'image'" />
// video embed
v-else-if="link.type === 'video'" />
...
但是，如果所支持的模板列表變得越來越長，這就會變得非常混亂和重復(fù)。以我們的評論為例——想要支持嵌入Youtube、Twitter、Github、Soundcloud、Vimeo、Figma……這個列表是無窮無盡的。
動態(tài)組件模板
另一種方法是使用某種加載器來加載所需的模板。這允許你寫一個干凈的組件像這樣:
class="comment">
// comment text
...
// type can be 'open-graph', 'image', 'video'...
:data="someData" :type="type" />
看起來好多了，不是嗎?讓我們看看這個組件是如何工作的。首先，我們更改模板的文件夾結(jié)構(gòu)。
?
就我個人而言，我喜歡為每個組件創(chuàng)建一個文件夾，因為稍后可以添加更多用于樣式化和測試的文件。當然，如何構(gòu)建結(jié)構(gòu)取決于您。
接下來，我們來看看如何構(gòu)建這個 < dynamic-link /> 組件。
:is="component" :data="data" v-if="component" />
export default {
name: 'dynamic-link',
props: ['data', 'type'],
data() {
return {
component: null,
}
},
computed: {
loader() {
if (!this.type) {
return null
}
return () => import(`templates/${this.type}`)
},
},
mounted() {
this.loader()
.then(() => {
this.component = () => this.loader()
})
.catch(() => {
this.component = () => import('templates/default')
})
},
}
這是怎么工作的？默認情況下，Vue.js支持 動態(tài)組件。問題是您必須注冊/導(dǎo)入您想要使用的所有組件。?
:is="someComponent">
import someComponent from './someComponent'
export default {
components: {
someComponent,
},
}
在 < dynamic-link /> 組件中，沒有注冊/導(dǎo)入任何組件，我們想要動態(tài)使用我們的組件。所以我們可以做的是使用 Webpack的動態(tài)導(dǎo)入。與計算值一起使用時，這就產(chǎn)生了神奇的魔力 - 是的，計算值可以返回一個函數(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')
})
},
結(jié)論：
如果您有一個組件要展示許多不同視圖，則可能很有用。
這種方式易于擴展。
它是異步的，模板僅在需要時加載。
保持代碼簡潔(DRY)。
看，官方出品了 Vue 編碼風格指南！
JS 的未來和 Web 多語言開發(fā)
你所不知道的 CSS 負值技巧與細節(jié)
8 個問題看你是否真的懂 JS
如果覺得本文有幫助，歡迎多多轉(zhuǎn)發(fā)點贊，推薦給更多的小伙伴喲
更多前端系統(tǒng)學(xué)習(xí)視頻教程，點擊這里獲取哦：https://study.miaov.com/study好消息~好消息~即日起新注冊的用戶，可享受新人“VIP視頻”禮包哦，注冊后記得添加微信客服：miaov_xy 來獲取哦
總結(jié)
以上是生活随笔為你收集整理的动态添加组件_使用vue.js的动态组件模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DDR4内存处理器：让电脑速度飞升，容量
- 下一篇： Vue指令篇_v-if、v-else、v