컴포넌트 통신 (props, emit)

모든 컴포넌트 인스턴스에는 각자의 스코프가 있다. 그래서 기본적으로 하위 컴포넌트에서 상위 컴포넌트의 데이터를 직접 참조할 수 없다.

vue 컴포넌트 통신 방식

Vue는 상위에서 하위로만 데이터를 전달해야 하는 기본적인 통신 규칙을 따른다.
상위에서 하위로 props라는 특별한 속성을 전달하여 데이터를 내려줄 수 있고, 하위에서 상위로는 emit을 이용해 이벤트를 올려줄 수 있다.

props 사용하기

상위 컴포넌트에서 child 컴포넌트로 message 속성을 전달해보자.

<child message="안녕하세요!"></child>

1. 하위 컴포넌트에 props 옵션을 사용해 수신할 것으로 기대되는 props를 명시적으로 선언한다.
2. 템플릿 내부에서 props를 사용한다.

Vue.component('child', {
  // props 정의
  props: ['message'],
  // props 사용
  template: '<span>{{ message }}</span>'
})

위의 방식은 그냥 동적 바인딩이 아니라서 상위의 데이터가 변경되어도 하위 컴포넌트에 적용되지 않는다.
동적 바인딩을 하려면 v-bind 속성을 이용하면 된다.

<div>
  <input v-model="parentMsg">
  <child v-bind:message="parentMsg"></child>
</div>

v-bind는 뷰 인스턴스 데이터를 바인딩해주는 것이므로 위 예시처럼 일반 문자열("안녕하세요!")이 아닌 자바스크립트 표현식을 써야한다는 걸 잊지말자.

props 검증

하위 컴포넌트가 상위 컴포넌트로부터 받는 props에 대한 요구사항을 지정할 수 있다. 문자열 배열로 정의하는 대신, 유효성 검사 요구사항을 담은 객체를 사용하면 된다.

// 하위 컴포넌트

props: {
    // 문자열이며 기본값은 ''
    type: {
      type: String,
      default: '',
    },
    // 문자열이며 꼭 필요함
    value: {
      type: String,
      required: true,
    },
}

type

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol

emit

하위에서 상위로 데이터를 전달하고 싶을 때는 이벤트를 발생시켜 상위 컴포넌트에 신호를 보내면 된다.

1. 하위 컴포넌트에서 특정 이벤트가 발생하면 emit으로 상위 컴포넌트에 이벤트를 올려준다.

// 하위 컴포넌트

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

2. 상위 컴포넌트에서 그 이벤트를 v-on으로 받아 메소드를 호출한다.

// 상위 컴포넌트

<child v-on:이벤트명="메소드명"></child>