🌟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 코드가 받아서 정해진 메소드를 호출합니다.
의 순서로 동작합니다.
