3. 컴포넌트

https://kr.vuejs.org/v2/guide/components.html ( 공식 가이드)

컴포넌트 - 영역을 조각 낸 단위

HTML 엘리먼트를 재사용을 가능하게 하고 캡슐화 하는데 도움이 된다.

상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트 이다.

경우에 따라 is 속성으로 확장.

Vue 컴포넌트 = Vue 인스턴스이기도 하므로, 모든 옵션 객체를 사용할 수 있다.*(루트 옵션 제외)

또한 라이프 사이클 훅을 사용할 수 잇다.

* 전역컴포넌트&지역 컴포넌트 

1) 전역 컴포넌트

Vue.component('my-component', {
  // 옵션
})

2) 지역 컴포넌트

- 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수있는 컴포넌트를 만들 수 있습니다:

var Child = {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 는 상위 템플릿에서만 사용할 수 있습니다.
    'my-component': Child
  }
})

※data는 반드시 함수여야 한다.

Vue.component('my-component', {

    template: '<div>{{ msg }]</div>',
    data: function(){
        return {
            msg: 'custom component'
        }
    }
})

* Props

- 모든 컴포넌트는 각 컴포넌트의 유효범위를 갖고있기때문에 컴포넌트 간의 값을 바로 참조하기 어렵다.

- 상위에서 하위로 값을 전달하려면 props 속성을 사용한다.

-  js에서 props 변수 명명을 카멜 기법으로 하면 html에서 접근은 케밥기법(-)으로 해야함

- 부모는 props라는 옵션을 통해서 자식에게 data를 전달한다. 자식은 events를 통해 부모에게 메시지를 보낸다.

Vue.component('child', {

  // props 정의
  props: ['message'],
  // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며
  // vm의 this.message로 사용할 수 있습니다.
  template: '<span>{{ message }}</span>'
})

[html]
<child message="내용"></child>

* 동적 props 

v-bind를 사용하여 부모의 데이터에 props를 동적으로 바인딩 할 수 있다. 데이터가 상위에서 업데이트 될 때마다 하위 데이터로 전달됨

v-bind:prop-name 

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

*is속성

가능한 경우 항상 문자열 템플릿을 사용하는 것이 좋습니다. ==>> ul, ol, select, table등 일부엘리먼트는 안에 들어올 엘리먼트가 제한적이기때문에 사용자 지정 컴포넌트를 사용시 문제가 생길수 있으므로, is 특수속성을 사용해야한다.

<table>
  <tr is="my-row"></tr>
</table>

*리터럴vs동적

실제 JavaScript 숫자를 전달하려면 값이 JavaScript 표현식으로 평가되도록 v-bind를 사용해야합니다.

<!-- 이것은 실제 숫자로 전달합니다. 동적 props --> <comp v-bind:some-prop="1"></comp>

* 단방향데이터 흐름

모든 props는 하위속성과 상위 속성 사이의 단방향 바인딩을 형성한다. 

- 상위 속성이 업데이트 되면 하위로 흐르지만 역방향은 불가함.(부모 -> 자식)

- 상하 관계 구조의 컴포넌트간의 통신은 props와 emit 이벤트를 이용해 함