Vue.js - truy cập dữ liệu từ thể hiện gốc trong thành phần

Question

Điều này có vẻ giống như một câu hỏi khá cơ bản nhưng tôi dường như không thể tìm thấy câu trả lời dứt khoát (hoặc thậm chí làm việc).

Tôi có ví dụ gốc của tôi:

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(); 

} 

}); 

Và tôi có một thành phần riêng biệt trong đó tôi muốn ra khỏi danh sách các sự kiện được lưu trữ trong trường hợp root. Tại thời điểm này có vẻ như sau:

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(); 
} 
} 

Điều này dường như không hiệu quả. Tôi cũng đã thử sử dụng this.$root.events để không có kết quả. Cách chính xác để đi về điều này là gì? Ghi nhớ Tôi muốn tham khảo dữ liệu từ gốc, không tạo ra một bản sao với phạm vi riêng của nó.

EDIT: cố gắng sử dụng đạo cụ, đây là thành phần danh sách, đó cũng không phải là làm việc:

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, bạn có thể dễ dàng vượt qua cùng một dữ liệu từ bố mẹ sang con . Vì tôi không biết làm thế nào bạn liên kết thể hiện gốc và EventList với nhau, tôi sẽ giả sử bạn đã đăng ký nó như một thành phần toàn cầu.

Các trạng thái tài liệu:

Lưu ý rằng nếu prop được truyền xuống là một đối tượng hoặc một mảng, nó được thông qua tham khảo. Việc đột biến Object hoặc Array bên trong đứa trẻ sẽ ảnh hưởng đến trạng thái gốc, bất kể kiểu ràng buộc bạn đang sử dụng.

Vì vậy, bạn sẽ sử dụng cùng một đối tượng trong tất cả các thành phần của bạn khi bạn vượt qua nó như một biện pháp chống đỡ.

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:

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); 

Trong mẫu dụ vue gốc, bạn có thể vượt qua các trường hợp vue gốc events như một tài sản gọi là events trong thành phần trẻ:

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

Answer 2

Đó là những gì "Props" là dành cho:

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

tôi bạn vượt qua một đối tượng/mảng như là một prop (những gì của bạn events dữ liệu chắc chắn sẽ được), đó là hai chiều đồng bộ tự động - thay đổi các sự kiện trong trẻ em, chúng được thay đổi trong phụ huynh.

Nếu bạn vượt qua giá trị đơn giản (chuỗi, số - ví dụ như chỉ event.name) thông qua đạo cụ, bạn phải sử dụng một cách rõ ràng .sync modifier: http://vuejs.org/guide/components.html#Prop_Binding_Types