Vue.js的動態組件模板

組件並不老是具備相同的結構。有時須要管理許多不一樣的狀態。異步執行此操做會頗有幫助。

實例：

組件模板某些網頁中用於多個位置，例如通知，註釋和附件。讓咱們來一塊兒看一下評論，看一下我表達的意思是什麼。
評論如今再也不僅僅是簡單的文本字段。您但願可以發佈連接，上傳圖像，集成視頻等等。必須在此註釋中呈現全部這些徹底不一樣的元素。若是你試圖在一個組件內執行此操做，它很快就會變得很是混亂。

處理方式

咱們該如何處理這個問題？可能大多數人會先檢查全部狀況，而後在此以後加載特定組件。像這樣的東西：

<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>

這裏沒有任何東西，由於咱們想要動態地使用咱們的組件。因此咱們能夠作的是使用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')
        })
},

結論

若是您有一個組件的許多不一樣視圖，則可能頗有用。

• 易於擴展。
• 它是異步的。模板僅在須要時加載。
• 保持代碼乾淨。

基本上就是這樣！ 若是你已經使用過這種技術，我很想聽聽你的看法，謝謝！