Truy cập các thuộc tính được tính toán của các thành phần trong Vue từ phụ huynh

Question

Làm thế nào để bạn truy nhập các thuộc tính được tính toán của các thành phần trong Vue từ cha mẹ?

Trong ví dụ này, tôi có một giỏ hàng với các thành phần item và tôi muốn để tính toán và hiển thị tổng các mặt hàng trong giỏ:

cart.js

var vm = new Vue({ 

    el: '#cart', 

    components: { 
    cartItem: require('./components/cart-item.js'), 
    }, 

    data: { 
    items: [ 
     { name: 'apple', qty: 5, price: 5.00 }, 
     { name: 'orange', qty: 7, price; 6.00 }, 
    ], 
    }, 

    computed: { 
    // I want to do something like this and access lineTotal from cart 
    cartTotal: function() { 
     return this.items.reduce(function(prev,curr) { 
     return prev + curr.lineTotal; 
     }, 0) 
    } 
    } 
}); 

giỏ-item.js

module.exports = { 
    template: require('./cart-item.template.html'), 
    props: ['fruit'], 
    computed: { 
     lineTotal: function() { 
     return this.fruit.price * this.fruit.qty; 
     } 
    }, 
}; 

html chính

<li v-for="item in items" is="cart-item" :fruit="item"> 

... 

@{{ cartTotal }} 

Làm cách nào để truy cập vào các thuộc tính lineTotal của mỗi mục hàng để sử dụng trong tổng hợp cartTotal?

Lưu ý rằng tôi không muốn làm lại các tính toán được thực hiện trong lineTotal mà thay vào đó sử dụng trực tiếp các thuộc tính được tính toán.

Answer 1

Bạn phải đặt tên cho trẻ em, ví dụ: bằng chỉ thị v-ref. Sau đó, từ cha mẹ bạn giải quyết các thuộc tính của trẻ em với this.$refs.mychild.myproperty