Vue- 컴포넌트간의 통신

컴포넌트 기본개념

• 같은 페이지에 구성되어있는 컴포넌트라도 데이터를 공유하기는 어렵다. 각자의 유효범위가 존재함
• 컴포넌트간의 통신 방법에는 상.하위 컴포넌트 관계, 같은 레벨의 컴포넌트 간 통신으로 구분

 

상.하위 컴포넌트간의 데이터 전달

• 상위 -> 하위 : props 전달
• 하위 -> 상위: 이벤트 발생

 

상위->하위 컴포넌트 데이터전달 예제코드

<!-- script부분-->
new Vue({
	el: '#app',
    data: {
    	meg: 'hello'
    }
});

Vue.component('child',{
	props: ['data'],
    template: '<p>{{data}}</p>',
});


<!--html부분-->
<div id="app">
	<child v-bind:data="meg"></child>
</div>

• #app 컴포넌트영역의 msg는 hello값을 가진다.
• child컴포넌트는 #app안에 구성되어있는 전역컴포넌트이다. 또한 하위 컴포넌트이다.
• child컴포넌트는 v-bind로 정의된 data값을 다룰 수 있게된다.
• 여러 data를 받으려면 v-bind: data1="meg1" v-bind: data2="meg2" 이렇게 여러번 선언해야 한다.
• vue인스턴스 안에 컴포넌트를 등록하면 -> 하위 컴포넌트가 된다.

 

하위 -> 상위 컴포넌트 이벤트 전달

• 하위 컴포넌트는 상위로 이벤트를 발생시켜 상위 컴포넌트에게 신호를 보낼 수 있다.
• $emit : v-on으로 명시해준 상위 컴포넌트 메서드명이 담긴 이벤트명을 이용해서 상위 컴포넌트 이벤트 발생

<!-- script부분  -->
Vue.component('child',{
	template: '<button v-on:click="child_method">click</button>',
    method:{
    	child_method: function(){
        	this.$emit('v-on-name');
        }
    }
});

new Vue({
	el:'#app',
    data:{msg: 'hello'},
    method:{
    	Hello: function(){
        	console.log("hello")
        }
    }
});

<!-- html부분 -->
<div id="app">
	<child v-on:v-on-name="Hello"></child>
</div>

• app컴포넌트에 선언된 하위 컴포넌트에서 v-on:v-on-name="Hello"로 실행하고자 하는 메소드를 지정하는 것이다.

 

관계없는 컴포넌트 간 통신 - 이벤트 버스

<!-- script부분 -->
var Bus = new Vue();
Vue.component('child',{
	template: '<button v-on:click="Triger">클릭</buttion>',
    method:{
    	Triger: function(){
        	Bus.$emit('triger1',100);
        }
    }
});

new Vue({
	el:'#app',
    created: function(){
    	Bus.$on('triger1',function(value){
        	console.log(value);
        });
    }
});



<!-- html부분 -->
<div id="app">
	<child></child>
</div>

• Bus 역할을 할 new Vue() 변수 하나 선언
• Bus.$emit('트리거 이름', 데이터) -> Bus.$on('트리거이름',처리함수) 식으로 처리가능함
• 이런 형식은 규모가 커지면 관리가 어려워지므로 Vuex 상태 관리 도구를 사용