헝그리개발자

Vue Component 간의 통신하기 위한 방법으로 Event 를 발행하고, Event 를 구독하는 방법을 이용할 수 있다.

Vue 이벤트에는 전역이벤트 또는 Global 이벤트가 있고, Component 이벤트 가 있다.

1. 전역이벤트

EventBus 를 통해, 발행하고, 구독할수 있으며,

블특정 컴포넌트에서 발행한 이벤트를 구독할 수 있는 형태이다.

공통의 script 파일안에 전역으로 아래와 같이 선언한다.

var EventBus = new Vue();

EventBus 는 단지, Vue 객체이다.

이벤트 발행

EventBus.$emit('이벤트명', 전달할 데이터...);

이벤트 구독

EventBus.$on('이벤트명', function(전달받을 데이터...) { } );

사용예제)

2. Component 이벤트

컴포넌트 이벤트는 일반적인 언어에서의 이벤트 사용방법과 동일하다.

특정 컴포넌트 안에서 이벤트를 발생시키면,

해당 컴포넌트를 호출한 부모객체에서 이벤트를 구독하는 방식이다.

이벤트 발행

this.$emit('이벤트명', 전달할 데이터...);

이벤트 구독

컴포넌트객체명.$on('이벤트명', function(전달받을 데이터...) { } );

 사용예제)

this.$data.my_object.col1 = "";

this.$data.my_object.col2 = "";

위와같이 중첩된 데이터에 컬럼을 추가 하게 되면, my_object 는 Observable 데이터이지만,

col1, col2 는 Observable 데이터가 아니다.

콘솔 로그로 확인해보면,

$data 를 확인해보면, my_object 는 observer 로 되어 있는걸 확인할 수 있다.

get my_object / set my_object 라는 property 가 자동으로 생성이 된것이다.

하지만, my_object 를 펼쳐보면, col1, col2 에는 아무것도 없다.

즉, col1, col2 는 vue 의 반응형 데이터로 동작하지 않는다는 것이다.

nested object 에 반응형 데이터를 추가하기 위해서, Vue.set 문장으로 바꾸어 보자.

Vue.set(this.$data.my_object, 'col1', '');

Vue.set(this.$data.my_object, 'col2', '');

다시, 콘솔 로그로 확인해보자.

my_object 안에 col1, col2 모두 observable 데이터로 등록이 된것을 확인할 수 있다.