コンポーネントVMのメインVue.jsインスタンスからの変数へのアクセス

Question

これは、メインVMからコンポーネントにプロップを渡す非常に単純なVueアプリケーションです。この値は、私の実際のアプリケーションでvue-resource経由で取得されます。もちろん

https://jsbin.com/tazuyupigi/1/edit?html,output

それは動作しますが、私は部品VM自体からこの値にアクセスするために苦労しています。あなたが見ることができるように

https://jsbin.com/hurulavoko/1/edit?html,output

は、私の警告は、未定義を示しています。これをどうすれば解決できますか？実行順序に問題があるようだが、ready()の代わりにcompiled()またはcreated()を使用しても違いはありません。

Answer 1

実行順序に問題があります。メインのVueインスタンスは、内部のものがコンパイルされるまで「準備ができていません」。これには、helloコンポーネントが含まれます。

barが使用される前に設定されていることを知る必要がある場合は、いくつかの点でそれを監視できます。 barがロードされたことを子供に知らせるために、親のイベント$broadcastを実行できます。または、barが更新されたときに子コンポーネントのwatch関数を使用して変更を加えることができます。

あなたの例では、あなたがgreetingは子供のready()機能の間に準備ができていないという事実を説明するために必要なので、とにかく遅延を持っているつもりだvue-resourceでしかし、もしあなたが$setbarcreated()で働くありません。 greetingがundefinedである可能性があるという事実を処理するためにはDOM構造を設計するか、イベントまたはwatch関数を使用して自分で待機する必要があります。 $broadcastと

例：

Vue.component('hello', { 
    template: 'From hello tag: {{ greeting }}', 
    props: ['greeting'], 
    ready: function() { 

    }, 
    events:{ 
    'bar-ready':function(){ 
     alert(this.greeting) 
    } 
    } 
}); 
new Vue({ 
    el: '#app', 
    created: function() { 
     this.$http.get('/path') 
      .then(function(response){ 
       this.$set('bar',response.data); 
       this.$broadcast('bar-ready') 
      }.bind(this)) 
    } 
}); 

$broadcastドキュメント：https://vuejs.org/api/#vm-broadcast