前置き
今回は$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を使わずに済む書き方にしました。
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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> |
) pages
親で$emitのカスタムイベントを受け取り、
v-if="false"にすることで
Modalを非表示にします！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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で既にカスタムイベントがあるので
背景を作り、同じイベントを入れます。
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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を全て使うため、
総復習になりますよ♪