[Vue.js] Vue 컴포넌트

🌟Vue components

🎯컴포넌트란?

재활용성을 기준으로 화면의 영역을 나누는 것을 의미합니다. 이렇게 컴포넌트 기반으로 개발 시 재사용을 통해 개발시간을 줄일 수 있습니다. 데이터 오브젝트의 개별적 관리를 위하여 컴포넌트 내의 data는 함수로 작성합니다. 컴포넌트가 등록되면 템플릿에서 커스텀 엘리먼트로 사용합니다.

🎯전역컴포넌트

Vue.component('사용할 태그이름',{옵션})

이때 사용할 태그이름은 기존 html 태그와 겹치지 않게 지어줍니다. 컴포넌트 등록 후 html에서 <‘사용할 태그이름’></‘사용할 태그이름’> 으로 사용합니다.

🎯지역컴포넌트

var cmp = {
    //컴포넌트 내용 작성
}
new Vue({
    el : //인스턴스범위
    components : {
        '사용할 태그이름' : cmp
    } 
});

인스턴스 내에 components라는 옵션을 추가한뒤 내용을 작성합니다. 전역 컴포넌트와 마찬가지로 등록 후 html에서 <‘사용할 태그이름’></‘사용할 태그이름’> 으로 사용합니다.

🎯전역컴포넌트와 지역컴포넌트의 차이

전역 컴포넌트는 프로젝트 전반, 즉 어떤 인스턴스든 사용이 가능하지만 지역 컴포넌트는 el로 등록되어있는 인스턴스 영역내에서만 사용할 수 있습니다.