29歳未経験からエンジニアはじめました29歳未経験からエンジニアはじめましたホームVue.js、Nuxt.jsNuxt.jsで動的コンポーネントを使って簡単に切り替え可能なモーダルを実装する2019/04/06SHAREツイートシェアはてブGoogle+PocketLINEこんにちは、あかしぃです。Nuxt.jsで、動的コンポーネントを使ったモーダルの実装方法を解説します。Nuxt.jsで、と書いていますが、記述方法はVue.jsでも基本的に同じはずです。動的コンポーネント動的コンポーネントとは、「is」属性を使って、コンポーネント内の子コンポーネントを動的に切り替えられるコンポーネントのことです。言葉ではいまいち伝わりにくいかもしれませんが、Vue公式に例があるので、そちらを参考にしてください。動的コンポーネントを使えば、「あるページにおいてクリックされる要素(ボタン)ごとに、モーダル内の表示を変える」といったことが簡単にできます。実装方法まず、モーダルを表示させる元のページを作ります。cssは省略モーダルは同一デザインのものを使いまわしたいので、ModalWrapperでラップしています。componentのis属性にcurrentModalComponentをバインディングさせています。これにより、currentModalComponentが変化することで、表示されるモーダルの中身が変化します。currentModalComponentを更新するのはModal1とModal2メソッドですね。クリックされるボタンによって発火するメソッドが異なるので、自由にcurrentModalComponentを変更することができます。モーダルの表示/非表示を担うshowModalについてですが、これの管理はvuexに任せてもいいかもしれません。今回は子コンポーネントからのイベント伝達(emit)で更新させることにしています。次に、ModalWrapperです。}}</style>中に子コンポーネントを入れる予定のコンポーネントなので、<slot>タグを用いています。ModalWrapperの役割は、背景を暗くするといったデザイン面と、子コンポーネントからcloseイベントを伝達することです。背景がクリックされてもモーダルをクローズさせたいので、背景部分にclickイベントを実装しています。最後に、モーダルの中身となるModal1、Modal2です。}}</script>ボタンのclickイベントで、closeModalメソッドが発火します。closeイベントが親コンポーネントに伝達され、showModalがfalseになり、モーダルが非表示になるという仕組みです。まとめ今回の用途はモーダルの切り替えでしたが、他にもいろいろ使い道がありそうです。他にも使えていないVue.jsの機能があるので、それらも積極的に使っていきたいです。コメントをキャンセルメールアドレスが公開されることはありません。PostsVue.jsでフォーカス機能つきのスクロールスパイを実装するあかしぃ流、辛くない技術書の読み方Nuxt(Vue).jsで郵便番号が入力されたら自動的に住所も入力されるフォームを作るフロントエンド開発の副業を探しています。