컴포넌트(Component)

• Vue의 가장 강력한 기능 중 하나
• HTML Element를 확장하여 재사용 가능한 코드를 캡슐화
• Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용
• Life Cycle Hook 사용 가능
• 전역/지역 컴포넌트

전역 컴포넌트 등록

• 전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용
• 권장하는 컴포넌트 이름 : 케밥 표기법

<div id="app">
  <my-global></my-global>
  <my-global></my-global>
<div>
<script>
	Vue.component('MyGlobal', {
		template: '<h2>전역 컴포넌트임</h2>'
	});
</script>

지역 컴포넌트 등록

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

var Child = {
	template : '<div>사용자 정의 컴포넌트입니다!</div>
}
new Vue({
	components : {
    	'my-component' : Child
    }
})

Component Template

<div id="app">
  <my-comp></my-comp>
</div>
<template id="MyComp">
  <div>
  	<h2>{{msg}}</h2>
  </div>
</template>

<script>
 Vue.component('MyComp', {
 	template: '#MyComp',
    data(){
    	return {
        	msg : 'hello component',
        }
    },
 });
 new Vue({
 	el: '#app',
 });
</script>

컴포넌트 통신

• 상위(부모)-하위(자식) 컴포넌트 간의 data 전달 방법
• 부모에서 자식 : props라는 특별한 속성을 전달 (Pass Props)
• 자식에서 부모 : event로만 전달 가능 (Emit Event)

동적 props

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

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

사용자 정의 이벤트(Custom Events)

• 이벤트는 자동 대소문자 변환을 제공하지 않는다.
• v-on 이벤트 리스너는 항상 자동으로 소문자 변환되기 때문에, v-on:myEvent는 자동으로 v-on:myevent로 변환된다. 따라서 케밥케이스 권장.
  이벤트 발생
  vm.$emit("이벤트명", [파라미터]);
vm.$emit("speed", 100);
  이벤트 수신
  vm.$on("이벤트명", [콜백함수]);
vm.$on("speed", function(speed){});

하위에서 상위 컴포넌트로 event 전달

• 하위 컴포넌트에서 상위 컴포넌트가 지정한 이벤트를 발생 ($emit)
• 상위 컴포넌트는 하위 컴포넌트가 발생한 이벤트를 수신(on)하여 data 처리
  이벤트 발생
  vm.$emit("이벤트명");
  이벤트 수신
  <child v-on:이벤트명="상위 컴포넌트 메소드명"></child>

비상하위간 통식

• 비어있는 Vue Instance 객체를 Event Bus로 사용
• 복잡해질 경우 상태관리 라이브러리 Vuex 사용 권장

var bus = new Vue();
// 컴포넌트 A
bus.$emit('id-selected', 1);
// 컴포넌트 B
bus.$on('id-selected', function(id){});