使用vue.js的動態組件模板

最近剛作完建站工具，準備總結裏面使用到的一些技巧，同時會作一版簡化的放在 github上。

先來一篇翻譯的文章，和我在項目中使用的動態組件思路同樣，不過缺乏了演化的過程，直接給出了最終的解決方案。這篇文章給的場景也很簡單，但要了解這種思想是足夠的。以後再詳細的總結我遇到的問題和解決方案，放在更復雜的場景中。

如下是翻譯正文：

組件並不老是具備相同的結構。有時須要管理許多不一樣的狀態（注：指的是根據不一樣狀態顯示不一樣組件）。異步加載組件對此操做頗有幫助。

用例

在 Scrumpy 中組件用於提醒、評論和附件等多個地方。讓咱們看一下評論部分，看看我要表達的是什麼意思。

評論再也不只是簡單的文本字段，你但願可以發佈連接，上傳圖片，集成視頻等等。全部這些徹底不一樣的元素都必須在此評論中呈現出來。若是您試圖在一個組件中執行此操做，它很快就會變得一團糟。

最多見的評論有連接、圖像和視頻

咱們如何處理這個問題?可能大多數人會判斷全部的狀況，加載特定的組件，例如這樣：

<template>
  <div class="comment">
      // comment text    
      <p>...</p>
  
      // open graph image
      <link-open-graph v-if="link.type === 'open-graph'" />
      // regular image
      <link-image v-else-if="link.type === 'image'" />
      // video embed
      <link-video v-else-if="link.type === 'video'" />
      ...
  </div>
</template>

可是，若是所支持的模板列表變得愈來愈長，這就會變得很是混亂和重複。以咱們的評論爲例——想要支持嵌入Youtube、Twitter、Github、Soundcloud、Vimeo、Figma……這個列表是無窮無盡的。

動態組件模板

另外一種方法是使用某種加載器來加載所需的模板。這容許你寫一個乾淨的組件像這樣:

<template>
    <div class="comment">
        // comment text    
        <p>...</p>
    
        // type can be 'open-graph', 'image', 'video'...
        <dynamic-link :data="someData" :type="type" />
    </div>
</template>

看起來好多了，不是嗎?讓咱們看看這個組件是如何工做的。首先，咱們更改模板的文件夾結構。

就我我的而言，我喜歡爲每一個組件建立一個文件夾，由於稍後能夠添加更多用於樣式化和測試的文件。固然，如何構建結構取決於您。

接下來，咱們來看看如何構建這個 < dynamic-link /> 組件。

<template>
    <component :is="component" :data="data" v-if="component" />
</template>
<script>
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')
            })
    },
}
</script>

這是怎麼工做的？默認狀況下，Vue.js支持 動態組件。問題是您必須註冊/導入您想要使用的全部組件。👎

<template>
    <component :is="someComponent"></component>
</template>
<script>
import someComponent from './someComponent'
export default {
    components: {
        someComponent,
    },
}
</script>

在 < dynamic-link /> 組件中，沒有註冊/導入任何組件，咱們想要動態使用咱們的組件。因此咱們能夠作的是使用 Webpack的動態導入。 與計算值一塊兒使用時，這就產生了神奇的魔力 - 是的，計算值能夠返回一個函數。 超級方便！🙌

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')
      })
},

結論：

1. 若是您有一個組件要展現許多不一樣視圖，則可能頗有用。
2. 這種方式易於擴展。
3. 它是異步的，模板僅在須要時加載。
4. 保持代碼簡潔(DRY)。

若有誤差歡迎指正學習，謝謝。

若是對你有幫助，請關注【前端技能解鎖】：