shaking blog

Component
- 컴포넌트도 템플릿과 비슷한 개념. 템플릿은 뭔가 추상적인 개념이라고 한다면 컴포넌트는 이를 구현할 기술
- Component 사전적 정의 : 구성요소, 부품 Angular 에서 Component 의미
- Component = Template + Class (Properties와 Method를 포함할 수 있음) + Meta Data
- Template : View layout, HTML 형태로 작성되어있다 Binding 과 Directive(지시자)를 포함한다.
- Class : Code supporting the view, Properties(data) 와 Method(logic) 를 포함한다. 타입스크립트 형태로 작성되어있다.
- Meta Data : Angular에 대한 추가 데이터, Decorator 로 정의되어있다. 모듈(Module)의 사전적 정의 : 하나로 일괄되어 다른 프로그램으로도 재이용(reusable)할 수 있는 형으로 되어있는 것

- 컴포넌트 생성 방법 1
ex)

<div id="app">
     <!-- 컴포넌트 -->
     <my-component></my-component>
</div>

<script>
   // 컴포넌트 생성
   Vue.component('my-component',{
       template : "<div> Hello Component </div>"
   });

   var Vue = new Vue({
       el : "#app",

   })
</script>

- 컴포넌트 생성 방법 2 

ex)

<div id="app">
     <!-- 컴포넌트 -->
     <your-component></your-component>
</div>

<script>
     // 컴포넌트 생성 추가
     var yours = {
         template : "<div>It is yours</div>"
     }

     var Vue = new Vue({
         el : "#app",
         components : {
             'your-component' : yours // 컴포넌트 추가
         }
     })
</script>

- <my-component></my-component>를 여러개 쓰면 Hello Component 라는 div 박스가 여러개 생성됨 

 

참고사이트 : https://velopert.com/3136