・Vue.jsの$emitの使い方は？
こんな疑問にお答えします。
Vue.jsでは「$emit」というものを使えば、子→親の方向に対して通信することが可能です。
子から親コンポーネントに向けて、カスタムイベントを発火（通知）することができます。
読み取り専用である「props」とは違う方向で渡せるので便利なんですよね。
今回は自分用のメモとして「$emit」についてまとめてみました！
参考にどうぞ
ということで、この記事では「Vue.jsの$emitの使い方」について解説していきます！
・Vue.jsの$emitの基本的な使い方
・Vue.jsの$emitのデータの渡し方
・Vue.jsの$emitのdefineEmitsの使い方
・Vue.jsの$emitの命名規則
【最新】Vue.jsの入門にオススメの本【３選】 
【最新】Vue.jsの入門にオススメのUdemy教材【３選】 目次
【解説】Vue.jsの$emitの基本的な使い方
そんなemitを使ったサンプルコードがこちら↓
<script setup lang="ts">
import TestVue from './components/TestVue.vue';
import { ref } from 'vue';
const fruitItem = ref('りんご');
</script>
<template>
<p>私の好きな食べ物は「{{ fruitItem }}」です</p>
<TestVue @fruit="fruitItem = 'ぶどう'"/>
</template><template>
<button @click="$emit('fruit')">子：変化ボタン</button>
</template>子コンポーネントのボタン部品によるクリックイベントが起きたら、親コンポーネントに伝わって「りんご」が「ぶどう」に変わるようになります。
このように子→親方向に通信ができるのがemitの特徴。
emitの使い方で重要な点がこちら↓
①：子で「$emit」関数を使う
②：子で「$emit」の引数にイベント名を記述
③：親で子コンポーネントタグに「@イベント名」を記述
④：親で③の値にイベント内容を記述
⑤：子から親に対してイベントを発火可能に
順に解説してきます。
下記のように子コンポーネントに「$emit」という関数を記述します。
<button @click="$emit()">ボタン</button>そしたら引数に好きな文字列を記述しましょう。
例として「fruit」と記述しました。
<button @click="$emit('fruit')">ボタン</button>これでクリックしたら「fruit」という名前のイベントが発生します。
続いて親ファイルの子コンポーネントタグに対して、先ほどつけたイベント名を指定します。
<TestVue @fruit=""/>そしたらそのイベントの値に、イベント処理内容を記述します。
<TestVue @fruit="fruitItem = 'ぶどう'"/>今回は例として、fruitItemに ‘ぶどう’を代入する内容を書きました。
（もちろん関数を呼び出す等も可能です）
これで「子コンポーネントのボタンをクリック」→「fruitというイベントが発生」→「fruit内のイベント処理が発生」の流れが起きます。
全体コードがこちら。
<script setup lang="ts">
import TestVue from './components/TestVue.vue';
import { ref } from 'vue';
const fruitItem = ref('りんご');
</script>
<template>
<p>私の好きな食べ物は「{{ fruitItem }}」です</p>
<TestVue @fruit="fruitItem = 'ぶどう'"/>
</template><template>
<button @click="$emit('fruit')">子：変化ボタン</button>
</template>ボタンをクリックしたら「りんご」→「ぶどう」に変わるということですね。
emitを使うことで、子→親方向への通信ができました！
【解説】Vue.jsの$emitのデータの渡し方
$emitはイベントを発生させるだけでなく、データを親に対して渡すことが可能です。
やり方は第2引数にデータを記述するだけ。
実際に引数を使ったサンプルがこちら↓
<script setup lang="ts">
import TestVue from './components/TestVue.vue';
import { ref } from 'vue';
const fruitItem = ref('りんご');
</script>
<template>
<p>私の好きな食べ物は「{{ fruitItem }}」です</p>
<TestVue @fruit="fruitItem = $event"/>
</template><template>
<button @click="$emit('fruit', 'オレンジ')">子：変化ボタン</button>
</template>子コンポーネントの$emitの第2引数に記述した「オレンジ」という値が、親コンポーネントに対して渡ります。
コードの中で重要な点がこちら↓
①：子の$emitの第2引数に渡すデータを記述
②：親で引数を使いデータを受け取る
順に解説してきます。
まず$emitの第2引数に、渡したいデータの値を入れます。
<button @click="$emit('fruit', 'オレンジ')">子：変化ボタン</button>例として「オレンジ」を記述しました。
後はその第2引数を親コンポーネントで受け取るだけです。
受け取り方はイベントオブジェクトのように、「$event」を用いて記述すれば可能です。
<TestVue @fruit="fruitItem = $event"/>これで子→親に対してデータを受け渡すことができました！
ちなみに関数を用いて引数を受け取ることも可能です。
実装例がこちら。
<script setup lang="ts">
import TestVue from './components/TestVue.vue';
import { ref } from 'vue';
const fruitItem = ref('りんご');
function fruitName(frutiValue) {
fruitItem.value = frutiValue
}
</script>
<template>
<p>私の好きな食べ物は「{{ fruitItem }}」です</p>
<TestVue @fruit="fruitName"/>
</template>このように関数を使って引数を受け取ることもできます。
【解説】Vue.jsの$emitの「defineEmits」の使い方
実は「defineEmits」というものが存在します。
これを使うことでコンポーネント内に、どんなイベントがあるかわかりやすくなります。
（ただ必ず書く必要はなく、なくても$emitの使用は可能）
そんな「defineEmits」の使い方がこちら。
<script setup>
defineEmits([])
</script>引数に[]を使います。
実際の使用例がこちら。
<script setup>
defineEmits(['fruit'])
</script>
<template>
<button @click="$emit('fruit', 'オレンジ')">子：変化ボタン</button>
</template>こんな感じで書くことで「このコンポーネントではfruitというイベントがある」と見ただけでわかりますよね。
ちなみに「defineEmits」の返り値を使えば、スクリプト内で書くことができます。
書き方がこちら。
<script setup>
const emit = defineEmits(['fruit'])
function emitFruit() {
emit('fruit', 'オレンジ')
}
</script>
<template>
<button @click="emitFruit">子：変化ボタン</button>
</template>このように返り値を使えば、スクリプト内でemitを使用することができます。
【解説】Vue.jsの$emitの命名規則
emitのイベント名が複数単語の場合、命名規則として下記があります。
・子コンポーネント→キャメルケース
・親コンポーネント→ケバブケース
基本的にはこの書き方をするという感じです。
子では複数単語の場合、キャメルケースで記述するのが基本的。
<script setup>
const emit = defineEmits(['fruitButton'])
function emitFruit() {
emit('fruitButton', 'オレンジ')
}
</script>
<template>
<button @click="emitFruit">子：変化ボタン</button>
</template>親では複数単語の場合、ケバブケースで記述するのが基本的。
<TestVue @fruit-button=""/>【解説】Vue.jsの$emitの使い方・イベント引数【defineEmits】：まとめ
- 「$emit」を使えば子→親の方向に対して通信が可能
- 「$emit」の第2引数を使えばデータの引き渡しも可能
- 「defineEmits」を使えば何のイベントがあるかすぐわかる
- 「$emit」のイベント名が複数単語の場合は命名規則がいちおうある
vue.jsで$emitを使う時はためしてみてね！
