Vue.js 시작하기 - Components

Vue Component

- 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능.

- 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.

컴포넌트 생성하기

<script>
  Vue.component('컴포넌트 이름', {
      // 컴포넌트 내용
  });
</script>

 

컴포넌트 생성 후 표시하기

[간단한 앱 헤더 컴포넌트 만들기]

<script>
  Vue.component('app-header', {
      template: `<h1>Header Component</h1>`
  });
</script>

❗ 위에서 등록한 컴포넌트를 화면에서 표시하려면 아래와 같이 컴포넌트 태그(이름)을 추가해야한다.

 <div id="app">
  <app-header></app-header>
 </div>

div 태그에 뷰 인스턴스가 생성되어있다는 가정하에 위의 템플릿 코드는 결과적으로 아래와 같이 표시된다.

 <div id="app">
  <h1>Header Component</h1>
 </div>

✔ 컴포넌트를 등록하고 해당 태그를 추가해주면 컴포넌트를 사용할 수 있다!

 

---

컴포넌트 등록 방법 두 가지

1. 전역 컴포넌트 등록

<div id="example">
  <my-component></my-component>
</div>

// 등록
Vue.component('my-component', {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
})

// 루트 인스턴스 생성
new Vue({
  el: '#example'
})

[결과]

<div id="example">
  <div>사용자 정의 컴포넌트 입니다!</div>
</div>

 

2. 지역 컴포넌트 등록

- 모든 컴포넌트를 전역으로 등록할 필요 ❌

<div id="app">
  <app-footer> </app-footer>
</div>

new Vue({ // app이라는 이름을 가진 태그를 찾아가서 붙여줌.
	el: '#app',
	components: {
      	// [지역 컴포넌트 등록 방식]
      	//'key': 'value'
      	//'컴포넌트 이름': 컴포넌트 내용
      	// 여러개가 들어가는 속성이기 때문에 components!!
      	'app-footer': {
    		template: '<footer>footer!</footer>'
      	}
    }
});

 

✔ tip

- Vue는 사용자 지정 태그 이름에 대해 W3C규칙을 적용하지 않지만 이 규칙을 따르는 것이 좋다.

- W3C규칙 : 모두 소문자이어야하고 하이픈을 포함해야함.