02-2.2 Vue 컴포넌트 통신

컴포넌트 간의 통신과 유효 범위

 - 앵귤러1이나 백본(Backbone.js)과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰(View)로 간주 했다.

 - 따라서 한 화면의 데이터를 해당 화면 영역 어디에서든지 호출 할 수 있다.

 - 하지만 뷰(Vue.js)의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다.

 - 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 갖기 때문이다. 이는 뷰 프레임워크 내부적으로 정의된 특징이다.

 - 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없다.

 

상, 하위 컴포넌트 관계

 - 위에서 언급 한 것 처럼, 컴포넌트는 다른 컴포넌트의 값을 직접적으로 참조할 수 없다.

 - 따라서 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다.

 - 가장 기본적인 데이터 전달 방법은 바로 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다.

 

상위 - 하위 컴포넌트란 트리 구조에서 부모 노드, 자식 노드처럼 컴포넌트 간의 관계가 부모, 자식으로 이루어진 컴포넌트를 의미한다.

지역 또는 전역 컴포넌트를 등록하면 등록된 컴포넌트는 자연스럽게 하위 컴포넌트(자식 컴포넌트)가 된다.

그리고 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트(부모 컴포넌트)가 된다.

 

상위에서 하위로는 props라는 속성을 전달하며, 하위에서 상위로는 기본적으로 이벤트만 전달 할 수 있다.

 

상위에서 하위 컴포넌트로 데이터 전달하기

<props> 속성

 - props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성

 - props 속성을 사용하려면 먼저 하위 컴포넌트의 속성에 정의한다.

Ex)

     Vue.component('child-component', {

           props: ['props 속성이름'],

     });

 

 - 상위 컴포넌트의 HTML 코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가

    <child-component v-bind:props 속성이름="상위 컴포넌트의 data 속성"></child-component>

 - v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값으로 하위 컴포넌트에 

    전달할 상위 컴포넌트의 data 속성을 지정한다.

 

P.65 ~ 66 예제 참고

 

하위에서 상위 컴포넌트로 이벤트 전달하기

<이벤트 발생과 수신>

 - 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생

    하면 상위 컴포넌트에서 해당 이벤트를 숫힌하여 상위 컴포넌트의 메서드를 호출하는 것이다.

<이벤트 발생과 수신 형식>

 - 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용하여 구현한다.

Ex)

    // 이벤트발생 

    this.$emit('이벤트명');

    // 이벤트수신

    <child-component v-on: 이벤트명="상위 컴포넌트의 메서드명"></child-component>

 - $emit()을 호출하면 괄호 안에 정의된 이벤트가 발생

 - $emit()을 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부이기 때문에 $emit()을 호출할 때 사용하는

    this는 하위 컴포넌트를 가리킨다.

 

P.68 예제 참고