快捷導(dǎo)航

前端架構(gòu)vue動(dòng)態(tài)組件使用基礎(chǔ)教程

更新時(shí)間：2022年02月19日 16:47:59 作者：悟世君子

這篇文章主要為大家介紹了前端架構(gòu)vue動(dòng)態(tài)組件使用的基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪

1、基本使用

新建組件 Article.vue

<template>
    <div>
        <p>黃州東南三十里為沙湖,亦曰螺師店。予買田其間,因往相田得疾。</p>
        <p>聞麻橋人龐安常善醫(yī)而聾。遂往求療。</p>
        <p>安常雖聾,而穎悟絕人,以紙畫字,書不數(shù)字,輒深了人意。</p>  
        <p>余戲之曰:“余以手為口,君以眼為耳,皆一時(shí)異人也?！?lt;/p>
        <p>疾愈,與之同游清泉寺。</p>
        <p>寺在蘄水郭門外二里許,有王逸少洗筆泉,水極甘,下臨蘭溪,溪水西流。</p>
        <p>余作歌云:“山下蘭芽短浸溪,松間沙路凈無(wú)泥,蕭蕭暮雨子規(guī)啼。</p>
        <p>誰(shuí)道人生無(wú)再少?君看流水尚能西,休將白發(fā)唱黃雞?！?lt;/p>
        <p>是日劇飲而歸。</p>  
    </div>
</template>

新建組件 Poetry.vue

<template>
    <div>
        <p>春宵</p>
        <p>蘇軾 </p>
        <p>春宵一刻值千金,花有清香月有陰。</p> 
        <p>歌管樓臺(tái)聲細(xì)細(xì),秋千院落夜沉沉。</p>   
    </div>
</template>

新建 Learn.vue

并在 Learn.vue 中引入 Article.vue 和 Poetry.vue

本文中 Learn.vue 、Article.vue、Poetry.vue 在同一文件夾下

<template>
    <div>
        <component :is="currentComponent"></component>
        <button @click="changeComponent">修改組件</button>
    </div>
</template>
<script>
import Article from './Article.vue'
import Poetry from './Poetry.vue'
export default {
    components: {
        Article,
        Poetry
    },
    data() {
        return {
            currentComponent: 'Article'
        }
    },
    methods: {
        changeComponent() {
            this.currentComponent = 'Poetry'
        }
    }
}
</script>

動(dòng)態(tài)組件，即使用 component 標(biāo)簽，通過(guò) is 屬性指定的名稱來(lái)切換不同的組件

運(yùn)行效果

2、配合 keep-alive 使用

keep-alive 可以保持這些組件的狀態(tài)，如果需要保持組件的狀態(tài)，則需要配合 keep-alive 一起使用

先看需要保持狀態(tài)，而不使用 keep-alive 的情況

新建 Manuscript.vue

<template>
    <div>
        <form action="">
            <input type="text" name="title" />
            <br>
            <input type="text" name="content" />
        </form>
    </div>
</template>

修改 Learn.vue

<template>
    <div>
        <component :is="currentComponent"></component>
        <button @click="changeComponent(1)">詩(shī)歌</button>
        <button @click="changeComponent(2)">稿件</button>
    </div>
</template>
<script>
import Poetry from './Poetry.vue'
import Manuscript from './Manuscript.vue'
export default {
    components: {
        Poetry,
        Manuscript
    },
    data() {
        return {
            currentComponent: 'Poetry'
        }
    },
    methods: {
        changeComponent(type) {
            if(type == 1) {
                this.currentComponent = 'Poetry'
            }
            if(type == 2) {
                this.currentComponent = 'Manuscript'
            }
        }
    }
}
</script>

運(yùn)行效果

看運(yùn)行效果，會(huì)發(fā)現(xiàn)在稿件中輸入文字后，切回到詩(shī)歌，再回到稿件，之前的稿件信息就不見(jiàn)了

出現(xiàn)這個(gè)情況的原因是，每次切換新組件的時(shí)候，Vue 都創(chuàng)建了一個(gè)新的組件。因此，如果需要保存原來(lái)的組件信息，要配合 keep-alive 使用

添加 keep-alive 后的 Learn.vue

使用 <keep-alive> 標(biāo)簽將動(dòng)態(tài)組件包裹起來(lái)

<template>
    <div>
        <keep-alive>
            <component :is="currentComponent"></component>
        </keep-alive>
        
        <button @click="changeComponent(1)">詩(shī)歌</button>
        <button @click="changeComponent(2)">稿件</button>
    </div>
</template>
<script>
import Poetry from './Poetry.vue'
import Manuscript from './Manuscript.vue'
export default {
    components: {
        Poetry,
        Manuscript
    },
    data() {
        return {
            currentComponent: 'Poetry'
        }
    },
    methods: {
        changeComponent(type) {
            if(type == 1) {
                this.currentComponent = 'Poetry'
            }
            if(type == 2) {
                this.currentComponent = 'Manuscript'
            }
        }
    }
}
</script>

運(yùn)行效果