質問: こんにちは、 タイトルの通りですが、現在以下の実装を実現しようとしていて方法を探しています。 具体的なコード等はまだないのですが、実現方法でアドバイスいただけたら大変助かります。 ### 前提・実現したいこと pages/index.vueでcurrentRouteを取得し、index.vueで適用しているlayoutsの中のcomponentに渡したいと思っています。 まだvueに関して深く理解ができていないのですが、index.vueでvuexのstoreにデータ(currentRoute)を入れ、componentで呼び出すという手法が一般的なのでしょうか? また、他に方法等ありましたらアドバイスいただけますでしょうか? 初歩的な質問で申し訳ないのですが、ご回答いただけますと幸いです。 ### 試したこと index.vueからlayoutを介さないcomponentへのデータの受け渡しは以下の方法で確認できました。 1. index.vue, componentでslotを設定。 2. index.vueのslotのデータ属性としてcurrentRouteの値を収納。 3. componentでgetElementByIdでエレメントを取得し、取得した値にdataset.xxxでdata(currentRoute)を取得 ただ、上記の方法はlayoutを介するしていない上、回りくどいやり方をしていると思います。 改善の方法等ありますでしょうか? よろしくお願いいたします。 ### 補足情報(FW/ツールのバージョンなど) "nuxt": "^2.4.2" "vue": "^3.2.1"
回答: 別々のコンポーネントで共通のデータを参照する場合は、storeを用いるのが一般的と思います。 VueやReactなど、仮想DOMを利用したフレームワークでは、実際のDOMのレンダリングはフレームワークにコントロールされるため、getElementByIdを使ってレンダリングされたDOMからデータを取得するのは、再現しづらいバグを生む可能性もあるのでお勧めできません。 具体的なコードができましたら、掲示していただけると回答を得やすいと思います。