vue动态组件,完美案例

代码图片: 下方有源代码↓

代码:

<template>
    <div>
        <button @click="chageView('comA')">11</button>
        <button @click="chageView('comB')">22</button>
        <button @click="chageView('comC')">33</button>

        <component :is="comData"></component>

    </div>
</template>

<script>
    import Home from '../views/Home';
    import board from '../views/board';
    import About from '../views/About';

    export default {

        data() {
            return {
                comData: 'comA'
            }
        },
        methods: {
            chageView(str) {
                this.comData = str;
            }
        },
        components: {
            comA: Home,
            comB: board,
            comC: About
        }
    }
</script>

<style scoped>
    /*这里填css样式*/
</style>