Admin1.vue_20211220

<template>
    <div>
        <h3>관리자 페이지: 컴포넌트 이용</h3>
        <div>
            <input type="button" class="button1" value="물품등록" @click="changeMenu(1)" />
            <input type="button" class="button3" value="물품관리" @click="changeMenu(2)" />
            <input type="button" class="button3" value="메뉴3" @click="changeMenu(3)" />
            <input type="button" class="button3" value="이미지여러개첨부" @click="changeMenu(4)" />
            <input type="button" class="button2" value="메뉴5" @click="changeMenu(5)" />
        </div>
        <hr />

        <!-- <div>
            <h5>v-if를 사용한 예제</h5>
            <menu-1 v-if="menu===1"></menu-1>
            <menu-2 v-if="menu===2"></menu-2>
            <menu-3 v-if="menu===3"></menu-3>
        </div>
        <hr /> -->

        <div>
            <!-- <h5>component 태그 사용 예제</h5> -->
            <component :is="currentComp"></component>
            <!-- currentComp: 변수명. if문 안쓰고 하는 방법(21라인)-->
        </div>

        <!-- <div>
            <h5>component 추가/삭제</h5>
            <component v-for="item in compItems" v-bind:key="item" :is="item"></component>
            <input type="button" class="button1" value="컴포넌트추가" @click="handleComp(1)" />
            <input type="button" class="button2" value="컴포넌트삭제" @click="handleComp(2)" />
        </div> -->
    </div>
</template>

<script>

    import Menu1 from './admin/Menu1.vue'
    import Menu2 from './admin/Menu2.vue'
    import Menu3 from './admin/Menu3.vue'
    import Menu4 from './admin/Menu4.vue'
    import Menu5 from './admin/Menu5.vue'

    export default {
        // 컴포넌트 등록
        components: {
            'menu-1': Menu1,
            'menu-2': Menu2,
            'menu-3': Menu3,
            'menu-4': Menu4,
            'menu-5': Menu5,
        },

        // 상태변수
        data() {
            return {
                compItems: ['menu-3', 'menu-3', 'menu-3'], // 추가 삭제 실습을 위해 3개 넣은 것
                menu: 1,
                currentComp: 'menu-5',
                compList: [null, 'menu-1', 'menu-2', 'menu-3', 'menu-4', 'menu-5'],
            }
        },

        methods: {
            changeMenu(no) {
                this.menu = no;
                this.currentComp = this.compList[no];
            },
            // handleComp(no) {
            //     if(no === 1) {
            //         this.compItems.push('menu-3');
            //     }
            //     else if(no === 2) {
            //         this.compItems.pop(); // push의 반대 pop
            //     }
            // }
        },
    }
</script>

<style scoped>

</style>