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

2019年12月9日 18:52

🎈 この記事はWPへ移行しました
【Nuxt.js】$emit実践編：モーダルウィンドウを操作しよう

# 前置き

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

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

【表示結果】

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

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 // 親ページ
<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 // 子コンポーネント
<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を全て使うため、
総復習になりますよ♪
公開予定日は12/11(火)です。
お楽しみに🌟