Vue- 컴포넌트

• 컴포넌트: 화면을 구성할 수있는 블록 -> 화면의 구조화, 일괄적인 패턴으로 개발가능
• 앞서 data, 메소드 등 Vue 를 구성할 수 있는 형식을 미리 만들고 컴포넌트에 추가함으로 코드 재활용 높음
• 전역 컴포넌트: 어느 범위든 지정한 컴포넌트 태그를 적용하고 싶을 때 사용가능
• 지역 컴포넌트: 특정 범위 내의 컴포넌트 태그에만 적용하도록 할 때 사용가능하다.
• 컴포넌트 안에 template, data, method 등 정의 가능하다.

전역 컴포넌트 등록 예시코드

<!-- 스크립트 부분 -->
var cmp = {
        template: '<div>지역 컴포넌트</div>'
      };
Vue.component('component_name', cmp});
      

<!-- html 부분-->
<div id="app">
	<my-local-component></my-local-component>
</div>
<div id="app2">
	<my-local-component></my-local-component>
</div>

전역 컴포넌트는 어느 영역이든 모두 적용된다.

---

지역 컴포넌트 등록 예시코드

var cmp = {
        template: '<div>지역 컴포넌트</div>'
      };

new Vue({
	el: '#app',
    components: {
    	'my-local-component': cmp
    }
});
      
      
<div id="app">
	<my-local-component></my-local-component>
</div>
<div id="app2">
	<my-local-component></my-local-component>
</div>

이때 app2에 해당하는 컴포넌트 태그는 적용되지 않는다.