Vue コンポーネント

コンポーネントは再利用性を求められる場合に設計されることが多いでしょう。 公式サイトを見ながら理解しましょう。 https://ja.vuejs.org/guide/essentials/component-basics.html

子コンポーネントをつくる

単一ファイルコンポーネント（SFC）をつくる場合、.vue ファイルを作成することになります。

Playground を新しく用意し、App.vue のファイル名のとなりに「+」ボタンがあるので、ファイルを作成して「Counter.vue」とします。

Counter.vue

<script setup>
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

親コンポーネントから読み込む

App.vue

<script setup>
import { ref } from 'vue'
import Counter from "./Counter.vue"
</script>

<template>
  <Counter />
</template>