【Nuxt.js】$emit実践編：モーダルウィンドウ を操作しよう

# 前置き
今回は$emitの実用的な
使い方をマスターしましょう！
作るのはこちら！

![picture_pc_a0f0b3d24b779b81d70a4b17ef94166e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/1878f2b1-c834-25d6-d49b-5533005b1b82.gif)

**モーダルウィンドウ です！**
子コンポーネントで作った
モーダルウィンドウ 上の
閉じるボタンもしくは
背景を押してモーダルを閉じます。
**なぜ$emitが必要なのか、
それは子コンポーネント自身で
起こすイベントを
親に検知してもらうためです！**
モーダルを表示させるだけなら
@clickとv-ifさえあればできます。
そして$emitを使わないと
モーダルは一生閉じられません。

$emit基礎編の記事もご覧ください。

# 作り方、手順
では実際にコードを書いて作ってみましょう！
**作り方**
こちらを使用
・$emit
・@click
・v-if

@clickやv-ifについては
今まで解説していませんが、
需要があれば別記事で解説します。

**手順**
・モーダルをコンポーネント化する
・親で@click時にコンポーネントを
　v-if="true"で表示させる
・コンポーネント上の閉じるボタンで
　$emitを利用し
　親にv-if="false"にし、非表示にする
です！

モーダル部分をコンポーネントにせず、
pageに直接記載する場合は
$emitの必要はありませんね。
ただ、コンポーネントのメリットを
活かすためにこれができると◎です😄

**Let's try!**

# Step1
モーダルの装飾から入るのが理想ですが、
**まずは簡単に実装するために、
ボタンで表示/非表示だけを作ってみましょう！**

アイコンはiconmonstrさんでお借りしました。
closeで検索、
svgコードを貼り付けて使用しております。
https://iconmonstr.com/

【表示結果】

![picture_pc_d1aa63a8828c60607b406cc4d526bab4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f3fd8976-35e9-936f-ae61-a1ed575ad53c.gif)

まずは子で装飾はこだわらず、
$emitを使ってイベントだけ渡しましょう！
基礎で解説した、
methodsを使わずに済む書き方にしました。

```Modal.vue
Modal.vue // 子コンポーネント
<template>
 <div class="modal">
   <div class="modal-wrap">
     // このボタンを押すとカスタムイベントcloseModalが発生
     <button @click="$emit('closeModal')"> 
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>
       <p>ここを押せば閉じる</p>
     </button>
   </div>
 </div>
</template>

<style lang="scss" scoped>
 .modal {
   position: fixed;
   top: 0;
   width: 100%;
   height: 100%;
   .modal-wrap {
     background-color: rgba(0,0,0,0.5);
     height: 100%;
   }
 }
</style>
```
親で$emitのカスタムイベントを受け取り、
v-if="false"にすることで
Modalを非表示にします！

```index.vue
index.vue // 親ページ
<template>
 <div class="page">
   <button @click="show=true">
    <p>モーダル表示</p>
   </button>
   // カスタムイベントcloseModalを受け取り、showをfalseにし非表示に。
   <Modal @closeModal="show=false" v-if="show" />
 </div>
</template>

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

export default {
 components: {
   Modal
 },
 data () {
   return {
     show: false,
   }
 },
}
</script>

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

できましたか？😀
え、これだけ？？？と思った方

はい、これだけです笑
めちゃくちゃ簡単です♪

# Step2
・背景を押してもモーダルが閉じるようにする
・モーダルのスタイリングを整える

Step1で既にカスタムイベントがあるので
背景を作り、同じイベントを入れます。

```Modal.vue
Modal.vue // 子コンポーネント
<template>
 <div class="modal">
   // 背景に全く同じイベントを追加
   <div class="bg" @click="$emit('closeModal')" />
   <div class="modal-wrap">
     <button @click="$emit('closeModal')"> 
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>
       <p>ここを押せば閉じる</p>
     </button>
   </div>
 </div>
</template>
```

モーダルのスタイリングは
Nuxt.jsには直接関係ないため省きます。
需要があれば
templateとCSSのみの
コードを公開しますが…。

スタイリングはともかく、
これで表示/非表示はできましたね👏
**これで$emitマスターです🎉✨**


**別記事にて簡単TODOリストをやります。
今までに解説してきた
slot, props, $emitを全て使うため、
総復習になりますよ♪**
お楽しみに🌟

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