【发布时间】：2016-07-26 02:19:53
【问题描述】：
如何从父级访问 Vue 中组件的计算属性？
在这个例子中，我有一个带有物品组件的购物车，我想计算并显示购物车物品的总和：
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)
}
}
});
购物车-item.js
module.exports = {
template: require('./cart-item.template.html'),
props: ['fruit'],
computed: {
lineTotal: function() {
return this.fruit.price * this.fruit.qty;
}
},
};
主要的html
<li v-for="item in items" is="cart-item" :fruit="item">
...
@{{ cartTotal }}
如何访问每个购物车项目的 lineTotal 属性以用于汇总 cartTotal？
请注意，我不想重做 lineTotal 中完成的计算，而是直接使用计算的属性。
【问题讨论】：
-
虽然@gurghet 为您提供了技术上正确的答案，但我建议您不要访问孩子的此类内容。计算所需的所有数据已经存在于购物车中，并且计算基本上是单行的。从子节点访问数据至少与在父节点中单独进行计算一样复杂。
-
购物车是我用来说明问题性质的一个简单示例。如果计算不是像不时那样是单行的，组件将是一种很好的方式来解耦用于购物车项目的逻辑。除了直接访问child而不对parent做计算，你还有什么建议吗？
标签： javascript vue.js