Vue 데이터 전달하기

pass props : 부모에서 자식에게 데이터를 전달

Emit Events : 자식이 부모에게 데이터를 전달

독립적으로 컴포넌트가 존재 자식이나 부모가 누군지 몰라서 동작함.

 

네이밍 규칙

컴포넌트내에 속성으로는 kebab-case / 스크립트 내부에서는 camelCase 사용

 

동적 Props

v-bind를 이용해서 데이터를 전달해야 한다.

부모 컴포넌트의 message가 변경된 경우 자식 컴포넌트는 다시 message 데이터를 받아 다시 렌더링을 함.(v-bind 생량가능)

<div id="app">
  <input type="text" v-model="message">
  <simple-component :message="message"></simple-component>
</div>
<script>
  var simpleComponent = {
    props: ['message'],
    template: '<div>{{message}}</div>'
  }
  new Vue ({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    component: {
      'simple-component': simpleComponent
    }
  });
</script>

주의점: 단방향이기 때문에 부모에서 업데이트가되면 자식에게도 업데이트가되지만, 그 반대는 안됨.

props를 변경하고 싶다면

1. props의 초기 값을 컴포넌트 로컬 데이터로 정의

2.  props로 부터 계산된 속성을 정의

 

props 검증하기

props의 데이터타입이 중요하다면 props 데이터 타입을 강제할 수 있다. 협업할때 유용하다.

아래와 같이 validation도 가능하다

...
<div id="app">
  <simple-component :price="price"></simple-component>
</div>
...
<script>
  var simpleComponent = {
    props: {
      name: {
        type: String,
        defalut: '구형 스마트폰' //기본값을 정의할 수 있음. 
      },
      price: {
        type: Number,
        validation: function (value) {
          // value 값이 50000이상이 아니면 검증 실패
          return value >= 500000
        }
      },
      message: {
        type: [String, Object],
        requeired: true
      },
      object: {
        type: Object,
        // 타입이 Object인 경우 함수를 통해 반환해야 함
        default: function () {
          return { message: '메세지' }
        }
      }
    },
    template: '<div>{{ name }}, {{ price }}원, {{ message }}</div>'
  };
  
  new Vue({
    el: '#app',
    data: {
      name: '최신형 스마트폰',
      price: 497000,
      message: '최신형 스마트폰 싸게 팝니다!'
    },
    components: {
      'simple-component': simpleComponent
    }
  })
</script>

type, default, required, validation

type 옵션에서 사용 가능한 타입은 

String, Number, Boolean, Function, Object, Array

여기서 Object와 Array의 경우 default를 정의할때 함수를 이용해 반환해 줘야함.

 

 

자식 컴포넌트가 부모컴포넌트에게 데이터를 전달 할 순 없지만 이벤트를 통해 메시지를 전달할 수 있다.

v-on을 이용해 템플릿에 사용자 지정 이벤트를 만들 수 있다. 이때 자식 컴포넌트는 $emit을 이용해 이벤트를 실행