从父级访问Vue中组件的计算属性

Question

如何从父级访问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而是直接使用计算属性.

Answer 1

您必须为孩子命名,例如通过v-ref指令.然后从父级中解析子属性this.$refs.mychild.myproperty