vue 动态组件

<template>
    <!-- 切换网页时is前有冒号 -->
    <component :is="comName"></component>
</template>

<script>
import AddCon from './components/add.vue';
import ListCon from './components/list.vue';
import MmmCon from './components/mmm.vue';

export default {
    data(){
        return{
            comName:'AddCon',
        }
    },
    components: {
        AddCon,
        ListCon,
        MmmCon
    },
    methods: {
        togglePage(n){
            switch(n){
                case 1:
                    this.comName = "addCon";
                    break;
                case 2:
                    this.comName = "listCon";
                    break;
                case 3:
                    this.comName = "mmmCon";
                    break;
            }
        }
    },
}
</script>