[解決済み] VueJSは親コンポーネントから子コンポーネントのデータにアクセスする

質問

私は vue-cli scaffold for webpackを使用しています。

私のVueのコンポーネント構造/階層構造は、現在以下のようになっています。

• アプリ
  • PDFテンプレート
    • 背景
    • 動的なテンプレート画像
    • 静的テンプレート画像
    • マークダウン

アプリのレベルでは、子コンポーネントのすべてのデータを単一のJSONオブジェクトに集約し、サーバーに送信できるvuejsコンポーネントメソッドが欲しいです。

子コンポーネントのデータにアクセスする方法はありますか？具体的には、複数のレイヤーの深さに？

そうでない場合、子コンポーネントによって変更されたときに新しい値にアクセスできるように、oberservable データ/パラメータを渡すためのベストプラクティスは何でしょうか？私はコンポーネント間のハード依存を避けようとしているので、今のところ、コンポーネント属性を使用して渡されるものは初期化値だけです。

UPDATEしてください。

堅実な回答です。両方の回答を見て、役に立つと思ったリソース。

• Vuex とそれを使用するとき
• 小規模なアプリのためのVuexの代替ソリューション

どのように解決するのですか？

このような構造の場合、Storeのようなものがあるとよいでしょう。

VueJSはそのためのソリューションを提供しており、それはVuexと呼ばれます。Vuexを使用する準備ができていない場合は、独自の簡単なストアを作成することができます。

これでやってみましょう。

MarkdownStore.js

export default {

 data: {
   items: []
 },

 // Methods that you need, for e.g fetching data from server etc.

 fetchData() {
   // fetch logic
 }

}

そして、このStoreファイルをインポートすることで、これらのデータをあらゆる場所で利用できるようになりました。

ホームビュー.vue

import MarkdownStore from '../stores/MarkdownStore'

export default {

 data() {
   sharedItems: MarkdownStore.data
 },

 created() {
   MarkdownStore.fetchData()
 }

}

これが、Vuexを使わない場合の基本的なフローです。