イベント

子コンポーネントはイベントを発行し、親コンポーネントに伝達します。

クリックイベントをきっかけに親に値を渡す

Counter.vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
const emit = defineEmits(["clicked"])
const clickHandler = () => {
  count.value++;
  emit("clicked", count.value)
}
</script>

<template>
  <button @click="clickHandler">click!</button>
</template>

App.vue

<script setup>
import { ref } from 'vue'
import Counter from "./Counter.vue"
const parentCount = ref()
</script>

<template>
  <Counter @clicked="parentCount=$event" />
  {{ parentCount }}
</template>