【Nuxt,js/Vue.js】確認ダイアログコンポーネントで$emitの挙動を学ぶ

結論

$emitは子コンポーネントから親コンポーネントにイベントを送るときに使用する

実際にNuxt.jsで$emitを使用して確認ダイアログを作成してみる

▼親コンポーネント

pages/sample/dialog.vueに子であるダイアログコンポーネント(components/SampleDialog,vue)とダイアログを表示するボタンを設置。

@click="openDialog()"で、クリックすると、openDialog()メソッドを呼び、activeオブジェクトがtrueとなり、ダイアログが表示される。

問題は、closeDialog()メソッドを呼び込んでいる、SampleDialogのイベント属性@cancelClicked

このonCancelClickedイベントは、下記子コンポーネントのcomponents/SampleDialog,vueから送られている。

子コンポーネントを確認してみる。

▼子コンポーネント

CommonDialogのイベント属性@onCancelClickedonCancelClicked()メソッドを呼び込み、this.$emit("cancelClicked")でcancelClickedイベントを親コンポーネントに送っている。

そして、@onCancelClickedイベントは、孫コンポーネントであるCommonDialogコンポーネントから送られている。

▼孫コンポーネント

OKボタンを押すと、cancelClickedメソッドが呼ばれ、this.$emit("onCancelClicked")によって、onCancelClickedイベントを、孫コンポーネントから見た親に当たるSampleDialogに送っている。

つまり、孫->子->親へとclickイベントが送られ、最終的に、親コンポーネントでcloseDialog()メソッドが走り、ダイアログを閉じる仕組みである。

参考

githubにコードを、herokuにデプロイしています。
よかったら覗いててみてください。

  • 【heroku】サンプルダイアログ
  • GitHub
  • Vue.js公式サイト