[Vue.js] 컴포넌트 통신

July 20, 2020

🌟Vue component communication

🎯Component간 데이터 공유 불가능

뷰는 각자의 범위 즉 스코프로 나뉘어 진 컴포넌트로 이루어지므로 다른 컴포넌트와 데이터를 직접적으로 공유할 수 없습니다.

🎯Vue Component 간 통신

컴포넌트간 데이터를 공유하기 위해선 뷰에서 정의하는 컴포넌트 데이터 전달방식을 사용해야 하는데 이는 다음과 같습니다.

컴포넌트는 부모와 자식의 관계로 이루어져 있습니다.
부모는 props를 통해 자식에게 데이터를 전달합니다.
자식은 이벤트를 통해 데이터의 변화를 부모에게 알립니다.

🎯부모컴포넌트 -> 자식컴포넌트 통신

자식은 부모의 데이터를 직접 참조할 수 없고 대신 props를 통해 데이터를 받아오게 되는데 이때 자식 컴포넌트 내에 부모로부터 어떤 데이터를 받아올건지 선언해주어야 합니다.

HTML

<div id = 'el에서 설정해준 적용범위'>
    <childcmp downdata = "데이터를 childcmp로 내려줍니다"></childcmp>
</div>

Javascript
```
new Vue({ // 뷰 인스턴스 자체가 부모 컴포넌트
el: ,//적용범위
components: {
    'childcmp':{ // 자식 컴포넌트 정의
        props : ['downdata'], // 받아올 데이터
        template:'{{ downdata }}' // 받아온 데이터를 설정해준 형태대로 템플릿에 출력
    }
}
})
```
🎯v-bind를 통한 props 동적 바인딩

v-bind 를 사용하여 동적으로 데이터를 관리합니다. 이를 통해 데이터 업데이트 시 자식이 받는 데이터를 일일히 바꿔주어야 했던 1.2의 방식과 달리 부모 컴포넌트 내의(vue instance 내의) 데이터가 업데이트 되면 자식컴포넌트가 받는 데이터도 자동으로 업데이트 되게끔 할 수 있습니다.

HTML

<div id = 'el에서 설정해준 적용범위'>
    <childcmp v-bind:receivedata = "downdata"></childcmp>
</div>

Javascript

new Vue({
el: //적용범위,
data : {
    downdata : 'props로 내려줄 데이터 정보'
},
components : {
    childcmp : { // 자식 컴포넌트 정의
        props : recievedata,
        template:'{{ receivedata }}'
    }
}
})

🎯자식 컴포넌트 -> 부모 컴포넌트 통신

자식은 부모에게 데이터를 직접 받아올 순 없지만 $emit으로 이벤트를 발생시켜서 부모에게 신호를 보내 부모의 method를 호출할 수 있습니다. 이렇게 발생시킨 이벤트는 v-on가 수신하여 method를 호출합니다.

<div id = "app">
    <upnum v-on:increase = 'UpNumClicked'></upnum> <!--자식에서 increase이벤트 발생시 부모의 UpNumClicked 호출-->
    <downnum v-on:decrease = 'DownNumClicked'></downnum><!--자식에서 decrease이벤트 발생시 부모의 DownNumClicked 호출-->
</div>

//자식을 부모랑 분리해서 선언
var upnum = { 
    template : '<button v-on:click = "IncreaseNum>증가</button>', // 버튼클릭시 자식 내 IncreaseNum 호출
    methods : {
        IncreaseNum : function(){ //부모에게 increase 이벤트 전송
            this.$emit('increase')
        }
    }
}

var donwnnum = {
    template : '<button v-on:click = "DecreaseNum>감소</button>', // 버튼클릭시 자식 내 DecreaseNum 호출
    methods : {
        DecreaseNum : function(){ //부모에게 decrease 이벤트 전송
            this.$emit('decrease')
        }
    }
}

new Vue({
    el: '#app',
    data : {
        num : 10
    },
    components : { //자식 컴포넌트 등록
        'upnum' : upnum, 
        'downnum' : downnum
    },
    methods : { //이벤트 오면 호출될 메소드들
        UpNumClicked : function(){
            this.num++;
        },
        DownNumClicked : function(){
            this.num--;
        }
    }   
})

위의 코드는 1. 화면 내 버튼을 클릭합니다. 2. 증가 버튼을 눌렀다면 increase / 감소버튼을 눌렀다면 decrease 이벤트가 발생합니다. 3. 이벤트를 HTML 코드가 받아서 정해진 메소드를 호출합니다. 의 순서로 동작합니다.

Written by@이주형

平常心

GitHub Facebook