Emitの定義・流れ

date
Mar 18, 2023
repo_url
slug
about-emit
status
Published
summary
type
Post
thumbnail_url
tags
vue
outer_link
子コンポーネントから親コンポーネントへの通信はEmitで行える。
 
コードの記述手順をざっくり表すと以下のようになる。
  1. 親コンポーネントの記述
    1. 処理メソッドの用意
    2. v-onディレクティブの記述
  1. 子コンポーネントの記述
    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の場合は必ずその戻り値を変数emitで受け取る。
}
// 2-1 Emitの定義
defineProps<Props>();
// emit()の実行は、引数としてイベント名文字列（createNewRand）を渡す。
const emit = defineEmits<Emits>();

// 2-2 処理メソッドの用意
const onNewRandButtonClick = (): void => {
  emit('createNewRand');
  // ここで実行しているemit()はdefineEmits()の戻り値になる。戻り値を関数として実行することで、その引数に該当するイベント名（createNewRand）と関連付けられた親コンポーネントのメソッド（onCreateNewRand）が実行される仕組みとなっている。
};
</script>

<template>
  <section class="box">
    <p>子コンポーネントで乱数を表示: {{ rand }}</p>
    <button v-on:click="onNewRandButtonClick">新たな乱数を発生</button>
  </section>
</template>

<style scoped>
.box {
  border: green 1px solid;
  margin: 10px;
}
</style>

© Hayato Kamiyama 2023 - 2025