Component 만들기

• HTML 축약: Component
• 파스칼 케이스 또는 케밥 케이스 사용
• 단어2개 이상으로 작명
• component 사용 이유: 재사용 쉬움
• 반복적으로 출연할 부분만 컴포넌트화 권장
• 데이터 관리가 살짝 복잡해짐

component 생성

• 파일명은 파스칼 케이스 또는 케밥 케이스여야 함
• .vue 확장명
• script의 name: '' 필수

/* DisCount.vue */
<template>
  <div class="discount">
    <h4>지금 결제하면 20% 할인</h4>
  </div>
</template>

<script>
export default {
  name: 'DisCount',
}
</script>

import 및 등록

• 컴포넌트.vue파일 import
• components: {}에 재정의
  

/* App.vue */
<script>
import DisCount from './DisCount.vue';

export default {
  name: 'App',
  components: {
    DisCount, //또는 , DisCount: DisCount,
  }
}
</script>

Component 사용

원하는 위치에 태그로 사용해서 넣기

/* App.vue */
<template>
  <DisCount/> //또는 <DisCount></DisCount>
</template>