Vueと共通

【Nuxt.js】Nuxt文法編:$emit

$emitとは

通常は子→親には何もできません。
$emitを使えば子自身のイベントや
値を親に渡せます🌟
値に関してはvuexで管理しても⭕️
ただシンプルな物なら
わざわざvuex使う必要もないし…
って時とかに便利です✨

ちなにみ親→子ならpropsが⭕️

おすすめ記事

$emitでモーダルの開閉をしています。
こちらができたら
queryでのModal管理も
ぜひチャレンジしてください✨💪


書き方

@clickとセットで使用します🌟
書き方は2種類

メソッド記法

@click="methods名"
this.$emit('イベント名', 第二引数)

インライン記法

@click="$emit('イベント名', 第二引数)"


簡単な使い方

buttonを押すとalertが出ます⏰

子のbuttonを親で検知し、
親でalertの出るmethodsを発火させます。

メソッド記法ver.

解説

$emit('welcome')
子のイベント@clickを
親に検知してもらうための$emit
イベント名をwelcomeと名付けています。

@welcome
親で先ほどのイベントwelcomeを受け取って
sayHiメソッドを発火させています💡

コード

) components

methods内で$emitを
使用する場合はthisが必要です💡

) pages


インライン記法ver.

コード

) components

) pages

変更なし


第二引数の使い方

ランダムな値を渡す

簡単な使い方と似ていますが、
今度はalertでランダムに
コメントが出てきます!
No, Yes, Yes, Yes, Maybeと出ていますね🤡

解説

this.possibleAdvice.length
3つのデータが入っているので3
Math.random()
0以上1未満の擬似乱数を返します。
0.99999
2.99999
Math.floor()
引数として与えた数以下の
最大の整数を返します。
Math.random() * this.possibleAdvice.length
最大で0.999... * 3 = 2.999...
Math.floor(2.999...)
このうちの整数は 0, 1, 2 の3つ
この整数に応じてpossibleAdvice内の
何番目の文字列が
表示されるかが決まります🌟

this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
give-adviceというイベント名を渡します。
this.this.possibleAdvice[randomAdviceIndex]
ランダムで生成された整数が0なら
配列0番目の'Yes'を親に渡して表示✨👀

コード

) components

) pages


第二引数でオブジェクトを渡す

自身が持つデータを
objectで渡すこともできます🌟
this.$emit('submit', { form: email });

実用的な例

解説

this.$emit('submit', this.form)
this.formがv-modelでバインドされている
data内のformオブジェクトです。
つまり…
this.$emit('submit', { form: 'text@gmail.com' }, { form: 'Password-1'})

コード

孫 < 子 < 親の順で記載しています✍️

) components

) components

) pages


まとめ

  • $emitは子から親にイベントと値を通知するもの
  • 第一引数に必ずイベント名
  • 第二引数で配列やオブジェクトも渡せる

-Vueと共通
-,

© 2020 aLiz Nuxt