Component란
HTML 엘리먼트를 확장하고 재사용 가능한 형태로 구현하는 것으로, Vue.js에서 사용된 모든 컴포넌트 하나하나가 Vue.js의 인스턴스 이기도 하다.
전역등록 Global Registration
전역등록 시 모든 자식 컴포넌트에서 해당 컴포넌트를 사용할 수 있다. 컴포넌트 생성 후 main.js 파일에 아래와 같이 전역 컴포넌트 등록을 해야한다.
Vue.component(component.name, component)지역등록 Local Registration
전역등록보다 많이 쓰고 보편적으로 사용되는 방식이다. 전역등록과 달리 자식 컴포넌트에서 자동으로 사용할 수 없고, 사용하고자 하는 부모 컴포넌트의 스크립트 태그에 아래 형식의 코드를 삽입하면 된다.
import component이름 from 'component위치'
export default {
components: {
component 이름
}
}컴포넌트 통신
컴포넌트는 부모-자식 관계로 이루어지는데 데이터를 전달할 경우 부모에서 자식으로는 props를 통해, 자식에서 부모로는 events를 통해 데이터를 전달한다.
상위 -> 하위 컴포넌트 데이터 전달 시의 Props
상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성으로 하위 컴포넌트의 속성에 정의한다. props 방식 사용 시 값을 수정할 수 없다.
Vue.component('child-component',{
props:['props 속성 이름'],
});상위 컴포넌트의 HTML 코드에 정의된 child-component 태그에 v-bind 속성을 정의한다.
<child-component v-bind:props속성명="상위 컴포넌트의 data속성"></child-component>하위 -> 상위 컴포넌트 데이터 전달 시의 Event
하위 컴포넌트에서 이벤트를 발생시켜 상위 컴포넌트에 신호를 보내는 방식이다.
//이벤트 발생
this.$emit('이벤트명');
//이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메소드명"></child-component>
하삐