Vueと共通

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

前置き

今回はコンポーネントの
親子間でのやりとりに使われる$emit!

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

$emitって?メリットは?

子から親に通信をすることができます🌟
通常は、親から子しかできず、
子から親の通信はできません❌
が、$emitならできるというわけです💡

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

いきなりモーダルウィンドウ でやると
ハードルがあがるため、
今回はalertを使って仕組みを解説します!

使い方

step
1
まずは$emitを使わずに子でアラートを表示

表示

コード

)

)

step
2
$emitを使う

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

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

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

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

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

省略した書き方

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

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

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

次回は$emit応用編をやります。
冒頭に書いたモーダルウィンドウ をやります。

下記3つの知識があればできます!
意外と簡単なんです♪
・$emit
・@click
・v-if

-Vueと共通
-,

© 2020 aLiz Nuxt