[Vue] Component 사용

작성일자 : 2020.09.06

환경 : Vue 2

 

 

1. Component 생성

 

NewComponent.vue

<template>
    New Component    
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

 

 

 

2. Component 등록

 

사용할 위치에 신규 Component 선언 

App.vue

<template>
    ...
</template>

<script>
// import 및 등록
import NewComponent from './components/NewComponent.vue'
export default {
  components: {
    NewComponent
  }
}
</script>

<style>
	...
</style>

 

import 할 때 컴포넌트 명칭은 꼭 파일명과 같지 않아도 된다.

 

 

 

3. Component 사용

 

<template>
  <div id="app">
  ...
    <!-- 컴포넌트 사용 -->
    <NewComponent/>
  
  ...
  </div>
</template>

<script>
import NewComponent from './components/NewComponent.vue'
export default {
  components: {
    NewComponent
  }
}
</script>

<style>
	...
</style>

 

컴포넌트를 사용할 때는 케밥 표기법으로도 사용이 가능하며, 공식 가이드에선 케밥 표기법을 권장한다.

import newComponent     ->      <new-component>