메소드 안에서 Vue2 Component 추가 하기

메소드 안에서 Vue2 Component 추가 하기

Vue2를 접한지 3개월 될때 하나의 프로젝트를 하였습니다.
여러 위치에(3군데) 여러개의 버튼을 사용자 취향에 맞게 배치 하는 작업이였는데
이전까지 Javascript나 Jquery로 만 FrontEnd를 작업 하였기에 똑같은 생각으로 작업을 시작 하였습니다.
하지만 Component를 읽고 그안에 prop를 입력하여 배치 하는것은 Methods 안에서는 생각 보다 방식이 많이 달랐습니다.
그래서 그 당시에는 각 위치에(3군데)버튼을 다 Component를 추가 하였고 v-if로 컨트롤 하였습니다.
다행이 테스트 및 실사용에 있어서 무리가 없었지만 이 찝찝한 코드는 수정해야할 필요가 있었고 여러 문서를 찾고 나서야 Methods안에서 Component를 컨트롤 하는 방법을 찾았습니다.

기본 코드

Vue2를 사용 하였으며 프로젝트 구조는 Bash vue Create Project 를 사용한 기본 구조 입니다.
코드를 알아 보기 쉽게 수정을 할건데

App.vue(부모 Component)

    <template>
    <div id="app" ref="app">
    </div>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld.vue'
    import Vue from "vue";


    export default {
    name: 'App',
    data(){
    },
    mounted() {
        this.addLogoCmp();
    },
    methods : {
        addLogoCmp(){
            let ComponentClass = Vue.extend(HelloWorld);
            let instance = new ComponentClass({
                propsData: { msg: 'Change Props' }
            })
            instance.$mount();
            this.$refs.app.appendChild(instance.$el);
        }
    }
    }
    </script>

    <style>
    #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    }
    </style>

HelloWorld.vue(자식 Component)

    <template>
    <div class="hello">
        <img alt="Vue logo" src="@/assets/logo.png">
        {{msg}}
    </div>
    </template>

    <script>
    export default {
    name: 'HelloWorld',
    props: {
        msg: {
        type : String,
        default : "Not Msg"
        }
    }
    }
    </script>

설명

코드를 보아서 알겠지만 Component가 추가 되는 Method는 "addLogoCmp"이다.

순서

1. Vue.extend로 Import한 HelloWorld.vue를 Component로 변경 한다.
2. new 로 할당을 하면서 propsData로 데이터를 설정한다.
3. instance.$mount();로 빌드(?) 한다.
4. 특정 ref위치에 appendChild로 Component를 추가 한다.

상세 설명

처음에 propsData를 사용하면서 props를 원래 사용해야 하지 않을까 생각 했지만 props는 선언문 이고 propsData는 값을 할당 하는거 같다.
또한 현재 코드에는 appendChild만 사용 되었지만 removeChild든 특정 Methods도 사용 가능해 보인다.

동적으로 코드 삭제

반대로 코드를 삭제 할때는 위와 간은 코드에
this.$refs.app.appendChild(instance.$el); -> this.$refs.app.removeChild(instance.$el); 를 사용하면 삭제되어 진다.