-- 전역 컴포넌트 등록
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
});
컴포넌트 이름 : template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미
컴포넌트 내용 : template, data, methods 등 인스턴스 옵션 속성 정의
<html>
<head>
<title>Vue Sample</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>
Vue.component로 전역 컴포넌트를 생성하여 해당 컴포넌트 아이디랑 매칭되는 곳에 template 소스가 변경된다.
화면에 나타나기 까지 처리 과정
-- 지역 컴포넌트 등록
new Vue({
components: {
'컴포넌트 이름' : 컴포넌트 내용
}
});
```<html>
<head>
<title>Vue Sample</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>
const cmp = {
//컴포넌트 내용
template : '<div>지역 컴포넌트가 등록되었습니다.</div>'
};
new Vue({
el : '#app',
components : {
'my-local-component' : cmp
}
});
</script>
</body>
</html>
new Vue() 로 인스턴스 생성하여 components 로 지역 컴포넌트를 생성
뷰의 컴포넌트를 공부하며 뷰는 개발자의 편의와 당장 개발을 포함한 시간이 지나고 유지보수가 매우 용이하게 만들어주는 프레임워크라는걸 느낀거 같다.
아직 JS에 대한 공부를 제대로 하지 않아 전역 컴포넌트와 지역 컴포넌트를 작성하는 코드를 완벽하게 이해는 하지 못했지만, 이 컴포넌트들을 잘 배워두고 익혀둔다면 나중에 방대한 양의 코드들 사이에서 내가 원하는 컴포넌트만을 골라 유지보수 및 수정이 좋겠다는 점을 생각하며 느꼈다.