Vue dynamic components

<template> <! -- There is a colon before is when switching pages --><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>
Copy the code