web-dev-qa-db-ja.com

VueJSは親から子コンポーネントのデータにアクセスします

webpackのvue-cli scaffold を使用しています

私のVueコンポーネントの構造/水平は現在、次のようになっています。

  • アプリ
    • PDFテンプレート
      • バックグラウンド
      • 動的テンプレート画像
      • 静的テンプレート画像
      • マークダウン

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

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

そうでない場合、監視可能なデータ/パラメーターを渡すためのベストプラクティスは何ですか？そのため、子コンポーネントによって変更されたときに新しい値にアクセスできますか？コンポーネント間のハードな依存関係を回避しようとしているため、現時点では、コンポーネント属性を使用して渡されるのは初期化値のみです。

UPDATE：

確かな答え。両方の回答を確認した後に参考になったリソース：

vue.jsvue-componentvuex
44
Daniel Brown

この種の構造の場合、何らかの種類のストアがあると便利です。

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ファイルをインポートすることで、どこでもそれらのデータを使用できます

HomeView.vue

import MarkdownStore from '../stores/MarkdownStore'

export default {

 data() {
   sharedItems: MarkdownStore.data
 },

 created() {
   MarkdownStore.fetchData()
 }

}

Vuexを使用したくない場合は、これが使用できる基本的なフローです。

35
Belmin Bedak

観察可能なデータ/パラメータを渡すためのベストプラクティスは何ですか？子コンポーネントによって変更されたときに新しい値にアクセスできるようにするには？

小道具の流れは一方通行であり、子供は小道具を直接変更してはいけません。

複雑なアプリケーションの場合はvuexが解決策ですが、単純な場合はvuexが過剰です。 @Belminが言ったことと同じように、反応性システムのおかげで、そのためにプレーンなJavaScriptオブジェクトを使用することさえできます。

別の解決策は、イベントを使用することです。 Vueは既にEventEmitterインターフェースを実装しています。子はthis.$emit('eventName', data)を使用して親と通信できます。

親は次のようにイベントをリッスンします：（@updateはv-on:updateの省略形です）

<child :value="value" @update="onChildUpdate" />

イベントハンドラのデータを更新します。

methods: {
  onChildUpdate (newValue) {
    this.value = newValue
  }
}

Vueのカスタムイベントの簡単な例を次に示します。
http://codepen.io/CodinCat/pen/ZBELjm?editors=101

これは単なる親子通信です。コンポーネントがその兄弟と通信する必要がある場合、Vue.jsでグローバルイベントバスが必要になります。空のVueインスタンスを使用できます。

const bus = new Vue()

// In component A
bus.$on('somethingUpdated', data => { ... })

// In component B
bus.$emit('somethingUpdated', newData)
22
CodinCat

これが良い習慣かどうかわかりません。

私の子コンポーネントには、変更されたデータを送信するボタンがありません。入力は5〜10のフォームです。別のコンポーネントの[処理]ボタンをクリックすると、データが送信されます。そのため、変化するすべてのプロパティを発行することはできません。

だから、私がやったこと、

親コンポーネントでは、「ref」から子のデータにアクセスできます

例えば

<markdown ref="markdowndetails"></markdown>
<app-button @submit="process"></app-button>

// js
methods:{
    process: function(){
        // items is defined object inside data()
        var markdowns = this.$refs.markdowndetails.items 
    }
}

注：アプリケーション全体でこれを行う場合は、代わりにvuexに移動することをお勧めします。

12
PJ3