じんのアウトプット日記(だいたい毎日更新)

日々の学習内容や気づいた点、また役立ちそうなTipsを書いていきます

【Vue.js: Vuetify】Dialogを別コンポーネントで分ける

Dialogとは

Vuetifyコンポーネントの一つでモーダルを表示させます。

vuetifyjs.com

これがけっこう便利なんですけど、一つのvueファイルにまとめるとけっこうな量になってしまいます。

通常の実装

以下のコードは、先のURLにあるサンプルコードを使用しています。

ファイルを見るとなかなか長くなっていますし、できれば1つのファイルには1つの機能だけということで、Dialogを別コンポーネントで分けて、モジュール化をしていきます。

実装方法1: オブジェクトに開閉状態を加え、propsで渡す

偶然発見した裏技ですが、本来子コンポーネントからprops経由で親コンポーネントのデータを変更するとエラーが発生しまが、オブジェクトにデータを包んで渡すことでそのエラーを回避することができます。 本当に抜け道みたいなやり方なので基本的には使用はNGですし、こんなことよりスマートにできる方法はもちろんあります。

実装方法2: $refsで親コンポーネントから子コンポーネントのデータを操作する

$refsを使用することで、親コンポーネントから子コンポーネントへとアクセスすることができます。

API — Vue.js