【Nuxt.js】$emit基礎編：親子間の通信をスムーズにしよう

# $emitって？
コンポーネントの親子間でのやりとりに使われる物です。
子から親への通信です！
例は次で説明します。
通常は子から親にデータを伝えることができません。
emitを使って気づいてもらいます😀

propsとの違いはprops応用をご覧ください。


# メリット
分かりやすい例で言うと…モーダルウィンドウ ！
親でボタンを押すと
子コンポーネントのモーダルウィンドウが表示、
子のモーダルウィンドウ で閉じるボタンを押せば、
親で検知してくれて非表示にしてくれます。
emitがなければモーダルウィンドウ は閉じることができないわけです。

いきなりモーダルウィンドウ でやると
ハードルがあがるため、
今回はalertを使って仕組みを解説します！
まずはemitは使わず、
子コンポーネントだけでalertを表示させてみましょう。

【表示結果】

![picture_pc_dc874044debd5eec9068665dfb573746.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/53494479-bbd1-218b-b696-c9400543346e.gif)

​【コード】
スタイリングは省きます。

```Component.vue
Component.vue // 子コンポーネント
<template>
 <div class="component">
   <button v-on:click="alert">emitを使おう！</button>
 </div>
</template>

<script>
export default {
 methods: {
   alert () {
     alert('Hello Nuxt.js!')
   }
 },
}
</script>

<style lang="scss">
</style>
```

親で子を読み込むだけ。

```index.vue
index.vue // 親ページ
<template>
 <div class="container">
   <Component />
 </div>
</template>

<script>
import Component from '~/components/Component.vue'

export default {
 components: {
   Component
 },
}
</script>

<style lang="scss">
</style>
```

今度は子でボタンを押すと
親でalertが表示されるようにしましょう！
**ここでemitの出番です！！**
どうするかというと、
子のメソッドalert関数をカスタムイベントとして名付けます。

```Component.vue
Component.vue // 子コンポーネント
<template>
 <div class="component">
   <button v-on:click="alert">emitを使おう！</button>
 </div>
</template>

<script>
export default {
 methods: {
   alert () {
     // alert('Hello Nuxt.js!')
     this.$emit('componentAlert')
   }
 },
}
</script>

<style lang="scss">
</style>
```

カスタムイベント名はキャメルケースで書きましょう！
親でcomponentAlertイベントを受け取ります。

```index.vue
index.vue // 親ページ
<template>
 <div class="container">
   <Component v-on:componentAlert="Alert" />
 </div>
</template>

<script>
import Component from '~/components/Component.vue'

export default {
 components: {
   Component
 },
 methods: {
   Alert:function () {
     alert('Hello Nuxt.js!')
   }
 },
}
</script>

<style lang="scss">
</style>
```

よく分からん！！！と思った方
関係性を線で繋ぎました😀

![picture_pc_9622d6e5e4ce1ecc0265026d8370ecbb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/2b1ffd25-ca5a-8b9a-ef15-ed38927f8fb6.png)

子でボタンをクリックしたら
componentAlertというイベントが発生し、それを親に渡します。
そのイベントを親ではAlertという関数名にし、そちらを実行しています。
関数名の先頭は小文字で良いのですが
子と親の関数名を区別するために、あえて大文字にしています。

**もっと分かりやすく文面で表すと…**
v-onは〜した時、といった意味をもつため
子）
clickした時、alert関数を実行します。
alert関数で起こる処理を$emitを使って親に渡します。
処理の名前をcomponentAlertとして親に渡します。
親）
componentAlertという処理が起きた時、
親ではそれをAlertと名付け、Alert関数を実行します。

# 省略した書き方
今の例で、
・子でわざわざmethodsでalertを作る必要があるの？
・親にイベント名だけ渡せればよくない？
と思った方！
はい、その通りです👏
解説のために細かく設定しました。
実際、子コンポーネントはこれだけで済みます。

```Component.vue
Component // 子コンポーネント
<template>
 <div class="component">
   <button v-on:click="$emit('componentAlert')">emitを使おう！</button>
 </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style>
```

$emitで渡すのはイベント名なので、シングルクォーテーションで囲みます。
これでシンプルに、簡単にイベントを渡せます😄

これで基礎はバッチリですね🎉
難しいと言われているpropsとemitですが、
基礎は意外とシンプルで簡単なんです！！





**$emit応用編では
冒頭に書いたモーダルウィンドウ をやります。**
下記3つの知識があればできます！
意外と簡単なんです♪
・$emit
・@click
・v-if
お楽しみに🌟

**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab