📤 5-2. $emit の書き換え

✅ 要点まとめ

• クラスコンポーネント：this.$emit('eventName', payload) で子 → 親にイベント通知。
• Composition API：defineEmits() で emit 関数を作り、emit('eventName', payload) と使う。
• TypeScript の場合はイベント名と引数の型を指定できる → 型安全で安心。

🟥 変換パターン（具体例）

【クラスコンポーネントの $emit 使用例】

// ファイル名: ChildComponent.vue (クラス版)
@Component
export default class ChildComponent extends Vue {
  // ボタンを押したら親にイベント通知
  handleClick() {
    this.$emit('increment', 5); // 5 を渡す
  }
}

<!-- template 部分 -->
<template>
  <button @click="handleClick">+5</button>
</template>

【Composition API (<script setup> 版 + TypeScript）】

<!-- ファイル名: ChildComponent.vue -->
<template>
  <button @click="handleClick">+5</button>
</template>

<script setup lang="ts">
// イベントの型を定義
const emit = defineEmits<{
  (e: 'increment', payload: number): void;
}>();

// クリック時に emit する
const handleClick = () => {
  emit('increment', 5);
};
</script>

🟡 親コンポーネントでの受け取り方（共通）

<!-- ファイル名: ParentComponent.vue -->
<template>
  <!-- 子から increment イベントを受け取る -->
  <ChildComponent @increment="handleIncrement" />
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';

const handleIncrement = (payload: number) => {
  console.log('受け取った値:', payload);
};
</script>

🟢 変換表（まとめ）