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