Vue.js - コンポーネント内のルート・インスタンスからのアクセスデータ

Question

これはかなり基本的な質問のように思えるが、私は決定的な（あるいは作業）答えを見つけるように見えることはできません。

私は私のルート・インスタンスがあります。

var vm = new Vue({ 
    el: '#app', 

    // Data 
    data: { 
     events: {} 
    }, 

    // Methods 
    methods: { 

    fetchEvents: function(){ 
     this.$http.get('/api/events').success(function(theseEvents) { 
     this.$set('events', theseEvents); 

     }).error(function(error) { 

     }); 

    } 
}, 

ready: function(){ 

    this.fetchEvents(); 

} 

}); 

をそして私は、私はルート・インスタンスに格納されているイベントを一覧表示したいの別々のコンポーネントを持っています。現時点では次のようになります。

var EventsList = Vue.extend({ 

template: '<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>', 

data: function(){ 
    return { 
    events: {} 
    } 
}, 

methods: { 

    syncEvents: function(){ 
    this.$set('events', this.$parent.events); 
    } 

}, 

// When ready... 
ready: function(){ 
    this.syncEvents(); 
} 
} 

これは動作していないようです。私もthis.$root.eventsを無駄にしようとしました。これについて正しい方法は何ですか？私は自分のスコープでコピーを作成するのではなく、ルートからデータを参照したいと思います。

編集：私はあなたが合格

http://vuejs.org/guide/components.html#Props

：のために何を "小道具" をだ

var EventsList = Vue.extend({ 

template: '<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>', 

props: ['events'] 

} 

Answer 1

Using props、あなたが簡単に子供たちに親から同じデータを渡すことができます。ルートインスタンスとEventListをどのようにリンクしたかわからないので、グローバルコンポーネントとして登録したと仮定します。

ドキュメントの状態：ダウン渡される支柱がオブジェクトまたは配列である場合、それは、参照によって渡されること

注意。子オブジェクト内でオブジェクトまたは配列自体を変更すると、使用しているバインドタイプに関係なく、親ステートに影響します。

プロップとして渡すと、すべてのコンポーネントで同じオブジェクトが使用されます。

var vm = new Vue({ 
    el: '#app', 

    // Data 
    data: { 
     events: {} 
    }, 

    // Methods 
    methods: { 

    fetchEvents: function(){ 
     this.$http.get('/api/events').success(function(theseEvents) { 
     this.$data.events = theseEvents; // You don't need to use $set here 

     }).error(function(error) { 

     }); 

    } 
}, 

ready: function(){ 

    this.fetchEvents(); 

} 

}); 

EventList：ルートVUEインスタンステンプレートで

var EventsList = Vue.extend({ 

template: '<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>', 

data: function(){ 
    return { 
    } 
}, 
props: { 
    events: Object, // assuming that your prop is an object 
}, 
} 

// Register the vue component globally, if you want to: 
Vue.component('eventlist', EventsList); 

、あなたは子コンポーネントにeventsと呼ばれるプロパティとしてルートVUEインスタンスをevents渡すことができます。

<div class="app"> 
    <!-- events is passed using the :events prop --> 
    <eventlist :events="events"> 
    </eventlist> 
</div> 

Answer 2

は、次のとおりです。小道具を使用しようと、ここで働いていないにもあるリストコンポーネントは、あります（あなたのデータは確かになるでしょう）オブジェクト/配列は、自動的に双方向の同期です - 子供のイベントを変更すると、それらは親で変更されます。

あなたは単純な値（文字列、数値 - 例えばのみevent.name）を渡すと小道具を経由し、明示的.sync修飾子を使用する必要があります。http://vuejs.org/guide/components.html#Prop_Binding_Types