title: Accessing the computed properties of components in Vue from the parent
body: <p>How do you access the computed properties of components in Vue from the parent? </p>
  
  <p>In this example, I have a cart with item components and I want to compute and display the sum of the cart items:</p>
  
  <p>cart.js</p>
  
  <pre><code>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)
      }
    }
  });
  </code></pre>
  
  <p>cart-item.js</p>
  
  <pre><code>module.exports = {
      template: require('./cart-item.template.html'),
      props: ['fruit'],
      computed: {
        lineTotal: function() {
          return this.fruit.price * this.fruit.qty;
        }
      },
  };
  </code></pre>
  
  <p>main html</p>
  
  <pre><code>&lt;li v-for="item in items" is="cart-item" :fruit="item"&gt;
  
  ...
  
  @{{ cartTotal }}
  </code></pre>
  
  <p>How do I access the <code>lineTotal</code> properties of each cart-item to use in summing <code>cartTotal</code>?</p>
  
  <p>Note that I do not want to redo the calculations done in <code>lineTotal</code> but instead use the computed properties directly.</p>