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

解析子属性

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

1 个答案: