Vue3 Tutorial Step13 Emit

今回は、Vue3のチュートリアルのStep13のemitについてです

Vue.js

Vue.js - The Progressive JavaScript Framework

ja.vuejs.org

Emitとは

Emitとは、Vue3のコンポーネントで子コンポーネントからイベントを発火するための機能です。イベントを発火させ、親コンポーネントでそのイベントから処理をトリガーすることができます。

Emitの使い方

子コンポーネントでdefineEmitsを使って、イベントを定義します。

// ChildComponent.vue
<script setup>
const emit = defineEmits(["response"])

emit("response", "Hello, from child!") // 第一引数はイベント名、第二引数はイベントリスナーに渡す値
</script>

コンポーネントで定義したイベントを親コンポーネントで受け取るためには、v-onディレクティブを使います。

// App.vue
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childMsg = ref("") // 子コンポーネントからのメッセージを保持するリアクティブな変数
</script>

<template>
  <ChildComponent @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

次回は、Vue3のチュートリアルのStep14のslotについてです