- 전역 컴포넌트: 여러 인스턴스에서 공통 사용 가능
Vue.component('컴포넌트 이름', { //컴포넌트 내용 });-
컴포넌트 이름이란?
- template 속성에서 사용할 HTML 사용자 정의 태그 (custom tag) → 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 ‘모두 소문자’와 ‘케밥 기법’을 따르지 않아도 됨 (케밥 기법의 예시: my-component, my-global-component)
- template 속성에서 사용할 HTML 사용자 정의 태그 (custom tag) → 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 ‘모두 소문자’와 ‘케밥 기법’을 따르지 않아도 됨 (케밥 기법의 예시: my-component, my-global-component)
-
컴포넌트 내용이란?
- 실제 화면의 HTML 요소로 변환될 때 표시될 속성들.
- template, data, methods등 인스턴스 옵션 속성을 정의할 수 있다.<body> <div id="app"> <button>컴포넌트 등록</button> <my-component></my-component> // --> 전역 컴포넌트 표시하는 방법! </div> <script src="https://파일위치"></script> <script> Vue.component('my-component', { template: '<div>전역 컴포넌트가 등록되었습니다</div>' }); new Vue({ el: '#app' }); </script> </body>
-
- 지역 컴포넌트: 특정 인스턴스에서만 유효 범위를 가짐
new Vue({
components: { // --> 전역 컴포넌트 등록과의 차이점! component 속성을 추가해준다
'컴포넌트 이름': 컴포넌트 내용
}
});
유저가 왜 그랬을까