こんにちは、 ゆうや（@yuyaphotograph）です！
本記事では、Vue.jsで作るモーダルにおいて複数のVueインスタンス間でイベントを共有する方法をご紹介します。
「Vue.jsでモーダルをとりあえずコピペで作ってみたい！」
「Vue.jsのモーダルの少し応用的な使い方が知りたい！」
という方におすすめです。
それでは参りましょう。
Vue.jsでモーダルを作ろう！
参考記事
以下2つの記事に大変お世話になりました！！
本当に助かりました。図解やサンプルが豊富でめちゃくちゃ分かりやすかったです。
参考 SPAだけじゃない！Vue.js モーダル実装にみるVue.jsの便利機能東京上野のWeb制作会社LIG 参考 【Vue.js】コンポーネント間のデータ通信について図解とものブログイベントバスを使って非親子関係でイベント共有
今回ご紹介するモーダルの仕様以下となります！
- 「開くボタン」をクリックでモーダル表示
- モーダル内の「☓アイコン」クリックでモーダル非表示
- モーダルのコンテンツ外クリックでモーダル非表示
「複数のVueインスタンス間でイベントを共有する」ということをやっています！
CodePenのサンプルと共にHTML、CSS、JSのコードご確認ください(^o^)
See the Pen
jOELBqg by 石森裕也 (@yuyaphotograph)
on CodePen.
応用編：ループ要素で使う
さてお次は、少しだけ応用編と参りましょう。
↓↓こんな感じでやってみます！
- @アイコンをクリックでモーダル表示
- クリックした要素の任意のテキストの値を取得
- 取得した値をモーダル内のテキストエリアに出力
実際に「@アイコン」をクリックして動作確かめてくださいまし(^o^)
See the Pen
gObxmmQ by 石森裕也 (@yuyaphotograph)
on CodePen.
フォーム要素の値を動的に変更できる「v-bind:value」や半角スペースを出力する「u00a0」など新しい知識を知れてとても勉強になりましたね！
まとめ
以上、Vue.jsで作るモーダルと複数のVueインスタンス間でイベントを共有する方法をご紹介しました。
いかがだったでしょうか？
Vue初学者の筆者が色々と調べた結果なんとか実装できたものなので「もっとスマートにできるよ！」という方がいらっしゃったらぜひコメントでご教示願いたいです。
最後までご高覧いただきありがとうございました！
