Emitの定義・流れ

1. 親コンポーネントの記述
1. 処理メソッドの用意
2. v-onディレクティブの記述

2. 子コンポーネントの記述
1. Emit定義
2. Emitの実行

<script setup lang="ts">
import { ref } from 'vue';
import OneSection from './components/OneMember.vue';

const randInit = Math.round(Math.random() * 10);
const rand = ref(randInit);

// 1-1 処理メソッドの用意
const onCreateNewRand = (): void => {
  rand.value = Math.round(Math.random() * 10);
};
</script>

<template>
  <section>
    <p>親コンポーネントで乱数を表示: {{ rand }}</p>
    <!-- 1-2 v-onディレクティブの記述（v-on:任意のイベント名="1-1のメソッド名"） -->
    <OneSection v-bind:rand="rand" v-on:createNewRand="onCreateNewRand" />
  </section>
</template>

<script setup lang="ts">

// 2-1 Emitの定義
interface Props {
  rand: number;
}
// 2-1 Emitの定義
interface Emits {
  (event: 'createNewRand'): void;
  // Propsのようなプロパティシグネクチャではなく、コールシグネクチャになる。引数名は何でもよいがeventやeと記述することが多い。
  // またEmitの場合は必ず