[Vue] Vue 컴포넌트

컴포넌트란?

화면의 영역을 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것
→ 조합하여 화면을 구성할 수 있는 블록

컴포넌트는 미리 정의된 옵션을 가진 인스턴스, 인스턴스가 확장된 것이다.
즉, "컴포넌트는 인스턴스이다." 는 맞는 말!

컴포넌트 등록하기

컴포넌트를 등록하는 방법에는 전역과 지역 두 가지 방법이 있다.

전역 컴포넌트

여러 인스턴스에서 공통으로 사용할 수 있다.

Vue.component('컴포넌트명',{
	//컴포넌트 내용
});

• 컴포넌트 명 : template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미
• 컴포넌트 내용 : 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성 → 인스턴스 옵션 속성을 정의할 수 있다

지역 컴포넌트

특정 인스턴스에서만 유효한 범위를 갖는다.

new Vue({
	components : {
    	'컴포넌트 명' : 컴포넌트 내용
    }
});

지역 컴포넌트는 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 명과 내용을 정의하면 된다.

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스의 components 속성으로 등록할 필요없이 한 번만 등록하면 어느 인스턴스에서든지 사용할 수 있다. 지역 컴포넌트는 인스턴스를 새로 생성할 때마다 등록해줘야한다.

데이터 전달

Vue에서의 데이터 전달 방법은 상위(부모)-하위(자식) 컴포넌트간의 데이터 전달 방법이다.
부모에서 자식으로는 props 속성 전달, 자식에서 부모로는 기본적인 이벤트만 전달할 수 있다.

props를 통한 데이터 전달

Vue.component('child-component',{
	props : ['props 속성명']
});

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

emit을 통한 이벤트 발생

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

<!-- 이벤트 수신 -->
<child-component v-on:이벤트명="상위 컴포넌트 메세지명"></child-component>

참고 링크

- [https://dahye-jeong.gitbook.io/vue-js/vuejs/2019-10-15-instance](https://dahye-jeong.gitbook.io/vue-js/vuejs/2019-10-15-instance)
- [https://kadamon.tistory.com/13](https://kadamon.tistory.com/13)
- [https://www.bottlehs.com/vue/vue-js-인스턴스-&-컴포넌트-소개/](https://www.bottlehs.com/vue/vue-js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-&-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%86%8C%EA%B0%9C/)
- [https://v3.ko.vuejs.org/guide/instance.html#라이프사이클-다이어그램](https://v3.ko.vuejs.org/guide/instance.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%83%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%84%80%E1%85%B3%E1%84%85%E1%85%A2%E1%86%B7)