뷰 컴포넌트 통신
뷰는 컴포넌트, 블록 단위로 화면을 구성하고, 컴포넌트 마다 고유한 유효 범위를 갖기 때문에, 동일한 웹 페이지 상이더라도 데이터를 공유할 수 없다.
각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다.
뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따른다.
가장 기본적인 데이터 전달 방법은 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다.
가족 관계로 보면 1촌간은 전달이 가능하고, 2촌 이상은 직접 전달이 안된다.
2촌 이상 직접 전달을 하기 위해서는 이벤트 버스를 이용한다.
이벤트 버스가 많아지면 관리가 필요한데 이 때 사용하는 상태관리도구로 뷰엑스 Vuex 가 있다.
상위 컴포넌트에서 하위로의 전달은 props 라는 속성을 사용한다.
하위 컴포넌트에서 상위로의 전달은 이벤트만 전달할 수 있다.
이벤트와 함께 데이터를 전달해야할 경우에는 이벤트의 두 번째 인자 값으로 전달하거나 이벤트 버스를 활용한다.
상위에서 하위 컴포넌트로 데이터 전달 : props
상위 컴포넌트의 HTML 코드
<child-component v-bind:props 속성 이름="상위 컴포넌트 data 속성"></child-component>
하위 컴포넌트의 props 속성 정의 방식
Vue.component('child-component', {
props: ['props 속성 이름'],
});
샘플 코드
<div id="app">
<child-component v-bind:propsdata="message"></child-component>
</div>
<script>
Vue.components('child-component', {
props: ['propsdata'],
template: '<p>{{ propsdata }}</p>',
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue World!'
}
});
</script>
하위에서 상위 컴포넌트로 이벤트 전달 : $emit() / v-on:
하위에서 상위 컴포넌트로의 통신은 이벤트를 발생시켜 상위 컴포넌트에 신호를 보내는 형식이다.
상위 컴포넌트에서는 하위 컴포넌트의 특정 이벤트가 발생하기를 기다렸다가 하위 컴포넌트에서 특정 이벤트를 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하고 상위 컴포넌트의 메서드를 호출한다.
이벤트의 발생은 $emit() 을 사용하고, 이벤트의 수신은 v-on: 속성을 사용한다.
//이벤트 발생 : 하위 컴포넌트의 특정 메서드 내부
this.$emit('이벤트명');
//이벤트 수신
<child-component v-on:이벤트 명="상위 컴포넌트의 메서드명"></child-component>
샘플 코드
<div id="app">
<child-component v-on:show-log="printText"></child-component>
</div>
<script>
Vue.component('child-component', {
template: '<button v-on:click="showLog">show</button>',
methods: {
showLog: function(){
this.$emit('show-log');
}
}
};
var app = new Vue({
el: '#app',
data: {
message: '안녕 뷰!'
},
methods: {
printText: function(){
console.log('이벤트 수신');
}
}
});
</script>
동일 레벨 컴포넌트 간 통신
하위 컴포넌트에서 $emit() 으로 이벤트를 발생하고 상위 컴포넌트에서 v-on: 으로 이벤트를 받은 후, 하위 컴포넌트들에게 props 로 데이터를 전달하는 방식으로 처리한다.
형제 간에 직접 전달은 없고, 부모자식간의 전달을 통한다.
이런 번거로움을 해결하는 방법으로 이벤트 버스를 이용한다.
관계 없는 컴포넌트 간 통신 - 이벤트 버스
이벤트 버스는 지정한 2개의 컴포넌트 간에 데이터를 주고 받을 수 있는 방법으로, 항상 상위-하위 구조를 유지하지 않아도 된다.
이벤트 버스 형식 - .$emit() / .$on()
//이벤트 버스를 위한 추가 인스턴스 생성
var eventBus = new Vue();
//이벤트를 보내는 컴포넌트
methods: {
메서드 명: function(){
eventBus.$emit('이벤트명', 데이터);
}
}
//이벤트를 받는 컴포넌트
methods: {
created: function(){
eventBus.$on('이벤트명', function(데이터){
//이벤트 정의
});
}
}
이벤트 버스를 이용하면 props 속성을 이용하지 않고도 지정 컴포넌트 간 직접적인 데이터 전달이 가능하다.
컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 필요한데, 이때 상태 관리 도구인 뷰엑스 Vuex 를 사용한다.
댓글