Vue.js動(dòng)態(tài)組件模板的實(shí)例分析

小編給大家分享一下Vue.js動(dòng)態(tài)組件模板的實(shí)例分析，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶(hù)提供超值的營(yíng)銷(xiāo)型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營(yíng)銷(xiāo)型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶(hù)提供了成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

組件并不總是具有相同的結(jié)構(gòu)。有時(shí)需要管理許多不同的狀態(tài)。異步執(zhí)行此操作會(huì)很有幫助。

實(shí)例：

組件模板某些網(wǎng)頁(yè)中用于多個(gè)位置，例如通知，注釋和附件。讓我們來(lái)一起看一下評(píng)論，看一下我表達(dá)的意思是什么。
評(píng)論現(xiàn)在不再僅僅是簡(jiǎn)單的文本字段。您希望能夠發(fā)布鏈接，上傳圖像，集成視頻等等。必須在此注釋中呈現(xiàn)所有這些完全不同的元素。如果你試圖在一個(gè)組件內(nèi)執(zhí)行此操作，它很快就會(huì)變得非常混亂。

處理方式

我們?cè)撊绾翁幚磉@個(gè)問(wèn)題？可能大多數(shù)人會(huì)先檢查所有情況，然后在此之后加載特定組件。像這樣的東西：

<template>
    <p 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'" />
        ...
    </p>
</template>

但是，如果支持的模板列表變得越來(lái)越長(zhǎng)，這可能會(huì)變得非?；靵y和重復(fù)。在我們的評(píng)論案例中 - 只想到支持Youtube，Twitter，Github，Soundcloud，Vimeo，F(xiàn)igma的嵌入......這個(gè)列表是無(wú)止境的。

動(dòng)態(tài)組件模板
另一種方法是使用某種加載器來(lái)加載您需要的模板。這允許你編寫(xiě)一個(gè)像這樣的干凈組件：

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

看起來(lái)好多了，不是嗎？讓我們看看這個(gè)組件是如何工作的。首先，我們必須更改模板的文件夾結(jié)構(gòu)。

就個(gè)人而言，我喜歡為每個(gè)組件創(chuàng)建一個(gè)文件夾，因?yàn)榭梢栽谝院筇砑痈嘤糜跇邮胶蜏y(cè)試的文件。當(dāng)然，您希望如何構(gòu)建結(jié)構(gòu)取決于你自己。

接下來(lái)，我們來(lái)看看如何<dynamic-link />構(gòu)建此組件。

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

那么這里發(fā)生了什么？默認(rèn)情況下，Vue.js支持動(dòng)態(tài)組件。問(wèn)題是您必須注冊(cè)/導(dǎo)入要使用的所有組件。

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

這里沒(méi)有任何東西，因?yàn)槲覀兿胍獎(jiǎng)討B(tài)地使用我們的組件。所以我們可以做的是使用Webpack的動(dòng)態(tài)導(dǎo)入。與計(jì)算值一起使用時(shí)，這就是魔術(shù)發(fā)生的地方 - 是的，計(jì)算值可以返回一個(gè)函數(shù)。超級(jí)方便！

computed: {
    loader() {
        if (!this.type) {
           return null
        }
        return () => import(`templates/${this.type}`)
    },
},

安裝我們的組件后，我們嘗試加載模板。如果出現(xiàn)問(wèn)題我們可以設(shè)置后備模板。也許這對(duì)向用戶(hù)顯示錯(cuò)誤消息很有幫助。

mounted() {
    this.loader()
        .then(() => {
           this.component = () => this.loader()
        })
        .catch(() => {
           this.component = () => import('templates/default')
        })
},

看完了這篇文章，相信你對(duì)Vue.js動(dòng)態(tài)組件模板的實(shí)例分析有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱(chēng)：Vue.js動(dòng)態(tài)組件模板的實(shí)例分析
URL分享：http://muchs.cn/article6/pipsig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站策劃、云服務(wù)器、網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)