【Vue】—动态组件

【Vue】—动态组件

<template>
    <div>
        <div>这里使用动态组件包装</div>
        <!-- 能显示不同的组件 -->
        <div>
            <keep-alive exclude="A">
                <component :is='curComp' />
            </keep-alive>
            <button @click="toggle">切换</button>
        </div>

        <div>
            <component :is='ccdd' />
            <button @click="cad">切换c和d</button>

        </div>
    </div>
</template>

<script>
    import A from './a';
    import B from './b';
    import C from './c';
    import D from './d';
    export default {
        components: {
            A,
            B,
            C,
            D
        },
        data() {
            return {
                curComp: A,
                ccdd: C
            };

        },
        methods: {
            toggle() {
                this.curComp = this.curComp == A ? B : A;
            },
            cad() {
                this.ccdd = this.ccdd == C ? D : C
            }
        }
    }
</script>

<style>

</style>