【Vue.jsで作るモーダル】複数のVueインスタンス間でイベントを共有する方法

【Vue.jsで作るモーダル】複数のVueインスタンス間でイベントを共有する方法

こんにちは、UVERworld布教クリエイターのゆうや(@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初学者の筆者が色々と調べた結果なんとか実装できたものなので「もっとスマートにできるよ!」という方がいらっしゃったらぜひコメントでご教示願いたいです。

最後までご高覧いただきありがとうございました!

Vue.jsの記事一覧ページ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です