emit (2) 썸네일형 리스트형 [Do it! Vue.js 입문] 06. 이벤트 버스 같은 레벨, 관계 없는 컴포넌트 간의 통신 같은 레벨의 컴포넌트 간의 통신을 공통적인 상위 컴포넌트에 값을 전달해 이벤트를 받는 형식으로 구현된다. 하지만 이런 상황에서는 상위 컴포넌트가 필요없음에도 통신을 위해 상위 컴포넌트를 두어야한다. 이런 경우 이벤트 버스 형식을 사용하여 관계 없는 컴포넌트끼리 바로 데이터를 전달할 수 있다. 이벤트 버스 이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다. 보내는 컴포넌트에는 .$emit()을, 받는 컴포넌트에는 .$on()을 구현한다. //이벤트 버스를 위한 추가 인스턴스 1개 생성 var eventBus = new Vue(); //이벤트를 보내는 컴포넌트 m.. [Do it! Vue.js 입문] 05. 뷰 상위-하위 컴포넌트 간의 통신 컴포넌트 간 통신과 유효 범위 Vue.js는 컴포넌트로 화면을 구성한다. 각 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 갖고 있고, 때문에 같은 웹 페이지라도 데이터를 공유할 수 없다. 이는 뷰 프레임 워크 내부적으로 정의된 특징으로, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. #예제 1 app 영역 cmp1과 cmp2 지역 컴포넌트를 등록하고, cmp2 컴포넌트에서 cmp1 컴포넌트의 data.cmp1Data 값을 직접 참조했을 때, 값이 나오지 않는걸 확인할 수 있다. 상위 컴포넌트와 하위 컴포넌트 앞서 [Do it! Vue.js 입문] 04. 뷰 컴포넌트에서 다룬 컴포넌트 등록 방법으로 지역, 전역 컴포넌트를 등록하면 자연스럽게 하위 .. 이전 1 다음
