Vue.js動態元件範本的詳細介紹（程式碼範例）

這篇文章帶給大家的內容是關於Vue.js動態元件範本的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

元件並不總是具有相同的結構。有時需要管理許多不同的狀態。非同步執行此操作會很有幫助。

實例：

元件範本某些網頁中用於多個位置，例如通知，註解和附件。讓我們來一起看一下評論，看看我表達的意思是什麼。
評論現在不再只是簡單的文字欄位。您希望能夠發布鏈接，上傳圖像，整合影片等等。必須在此註釋中呈現所有這些完全不同的元素。如果你試圖在一個元件內執行此操作，它很快就會變得非常混亂。

處理方式

我們該如何處理這個問題？可能大多數人會先檢查所有情況，然後在此之後載入特定元件。像這樣的東西：

<template>
    <p>
        // comment text    
        </p>
<p>...</p>
        // open graph image
        <link-open-graph></link-open-graph>
        // regular image
        <link-image></link-image>
        // video embed
        <link-video></link-video>
        ...
    
</template>

但是，如果支援的模板清單變得越來越長，這可能會變得非常混亂和重複。在我們的評論案例中 - 只想到支援Youtube，Twitter，Github，Soundcloud，Vimeo，Figma的嵌入......這個列表是無止境的。

動態元件模板
另一種方法是使用某種載入器來載入您需要的模板。這允許你編寫一個像這樣的乾淨元件：

<template>
    <p>
        // comment text    
        </p>
<p>...</p>
    
        // type can be 'open-graph', 'image', 'video'...
        <dynamic-link></dynamic-link>
    
</template>

看起來好多了，不是嗎？讓我們看看這個元件是如何運作的。首先，我們必須更改模板的資料夾結構。

就個人而言，我喜歡為每個元件建立一個資料夾，因為可以在以後添加更多用於樣式和測試的檔案。當然，您希望如何建造結構取決於您自己。

接下來，我們來看看如何建立此元件。

<template>
    <component></component>
</template>
<script>
export default {
    name: &#39;dynamic-link&#39;,
    props: [&#39;data&#39;, &#39;type&#39;],
    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(&#39;templates/default&#39;)
            })
    },
}
</script>

那麼這裡發生了什麼事？預設情況下，Vue.js支援動態元件。問題是您必須註冊/導入要使用的所有元件。

<template>
    <component></component>
</template>
<script>
import someComponent from &#39;./someComponent&#39;
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')
        })
},

結論

如果您有一個元件的許多不同視圖，則可能很有用。

• 易於擴充。

• 它是異步的。模板僅在需要時載入。

• 保持程式碼乾淨。

基本上就是這樣！ 

以上是Vue.js動態元件範本的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！