結論
$emitは子コンポーネントから親コンポーネントにイベントを送るときに使用する
実際にNuxt.jsで$emitを使用して確認ダイアログを作成してみる
▼親コンポーネント
pages/sample/dialog.vueに子であるダイアログコンポーネント(components/SampleDialog,vue)とダイアログを表示するボタンを設置。
@click="openDialog()"で、クリックすると、openDialog()メソッドを呼び、activeオブジェクトがtrueとなり、ダイアログが表示される。
問題は、closeDialog()メソッドを呼び込んでいる、SampleDialogのイベント属性@cancelClicked。
このonCancelClickedイベントは、下記子コンポーネントのcomponents/SampleDialog,vueから送られている。
子コンポーネントを確認してみる。
▼子コンポーネント
CommonDialogのイベント属性@onCancelClickedでonCancelClicked()メソッドを呼び込み、this.$emit("cancelClicked")でcancelClickedイベントを親コンポーネントに送っている。
そして、@onCancelClickedイベントは、孫コンポーネントであるCommonDialogコンポーネントから送られている。
▼孫コンポーネント
OKボタンを押すと、cancelClickedメソッドが呼ばれ、this.$emit("onCancelClicked")によって、onCancelClickedイベントを、孫コンポーネントから見た親に当たるSampleDialogに送っている。
つまり、孫->子->親へとclickイベントが送られ、最終的に、親コンポーネントでcloseDialog()メソッドが走り、ダイアログを閉じる仕組みである。
参考
githubにコードを、herokuにデプロイしています。
よかったら覗いててみてください。
