뷰 컴포넌트
조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)을 의미
ex. 네비게이션바, 테이블, 리스트, 인풋박스 등
컴포넌트 관계는 tree와 유사
전역 컴포넌트 등록
Vue 생성자에서 .component()를 호출하여 수행
cf. 태그이름의 명명 규칙은 '모두 소문자', '케밥 기법(단어와 단어 사이를 "-"로 잇는 명명)'을 사용
<html>
<head>
<title>Vue Component Registration</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
Vue.component('my-component', {
template: '<div>전역 컴포넌트가 등록되었습니다!</div>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
지역 컴포넌트 등록
인스턴스에 components 속성 추가, 등록할 컴포넌트 이름과 내용을 정의.
new Vue({ el: '#app', components: { 'my-local-component': cmp // 컴포넌트 이름 : 컴포넌트 내용 } });
지역 컴포넌트 등록하기
<head>
<title>Vue Component Registration</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
var cmp = {
// 컴포넌트 내용
template: '<div>지역 컴포넌트가 등록되었습니다!</div>'
};
new Vue({
el: '#app',
components: {
'my-local-component': cmp
}
});
</script>
</body>
</html>
지역과 전역 컴포넌트의 차이
전역은 인스턴스에 관계없이 출력이 가능하나, 지역은 인스턴스에 선언되지 않으면, 출력할 수 없음.
'IT > Vue.js' 카테고리의 다른 글
| [vue.js] vue 라우터 (0) | 2021.02.20 |
|---|---|
| [vue.js] vue component 통신 (0) | 2021.02.19 |
| [vue.js] 인스턴스(instance) (0) | 2021.02.19 |
| quasar axios 적용 (0) | 2020.08.05 |
| vscode로 Vue.js 시작하기 (0) | 2020.07.28 |
