前端架构vue动态组件使用基础教程

<template>
    <div>
        <p>黄州东南三十里为沙湖,亦曰螺师店。予买田其间,因往相田得疾。</p>
        <p>闻麻桥人庞安常善医而聋。遂往求疗。</p>
        <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意。</p>  
        <p>余戏之曰:“余以手为口,君以眼为耳,皆一时异人也。”</p>
        <p>疾愈,与之同游清泉寺。</p>
        <p>寺在蕲水郭门外二里许,有王逸少洗笔泉,水极甘,下临兰溪,溪水西流。</p>
        <p>余作歌云:“山下兰芽短浸溪,松间沙路净无泥,萧萧暮雨子规啼。</p>
        <p>谁道人生无再少?君看流水尚能西,休将白发唱黄鸡。”</p>
        <p>是日剧饮而归。</p>  
    </div>
</template>

<template>
    <div>
        <p>春宵</p>
        <p>苏轼 </p>
        <p>春宵一刻值千金,花有清香月有阴。</p> 
        <p>歌管楼台声细细,秋千院落夜沉沉。</p>   
    </div>
</template>

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

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

<template>
    <div>
        <component :is="currentComponent"></component>
        <button @click="changeComponent(1)">诗歌</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>

<template>
    <div>
        <keep-alive>
            <component :is="currentComponent"></component>
        </keep-alive>
        
        <button @click="changeComponent(1)">诗歌</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>