Vueと共通

【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を使わずに済む書き方にしました。

) components

) pages

親で$emitのカスタムイベントを受け取り、
v-if="false"にすることで
Modalを非表示にします!

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

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

Step2

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

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

) components

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

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

次回は簡単TODOリストをやります。
今までに解説してきた
slot, props, $emitを全て使うため、
総復習になりますよ♪

-Vueと共通
-,

© 2020 aLiz Nuxt