[Vue] Component

기초

https://ko.vuejs.org/guide/essentials/component-basics.html

// ButtonCounter.vue
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">
    당신은 {{ count }} 번 클릭했습니다.
  </button>
</template>

// App.vue
<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}
</script>

<template>
	<h1>여기에 많은 하위 컴포넌트가 있습니다!</h1>
	<ButtonCounter />     // ->  <button>당신은 0번 클릭했습니다.</button>
	<ButtonCounter />     // ->  <button>당신은 0번 클릭했습니다.</button>
	<ButtonCounter />     // ->  <button>당신은 0번 클릭했습니다.</button>
</template>

온라인으로 연습하기