将值从组件传递到父实例

Question

I have a component named cartComponent with a data property cartCount that gets incremented whenever a new item is added to the cart.

I need to use that value to update the value in the template which is not a part of the component. Is this possible?

Here's is the script for my parent Vue instance:

new Vue({
  el: "#cart-app",
  components: {
    cart: cartComponent
  },
  data: {
    searchQuery: '',
    appliedFilters: ['Day 1'],
    purchaseData: json,
    cCount: 0 // CARTCOUNT; NEEDS TO BE UPDATED FROM COMPONENT
  }
});

Answer 1

This is the ideal case for using the .sync modifier .

From the documentation:

When a child component mutates a prop that has .sync, the value change will be reflected in the parent

---

In your case, you could add the .sync modifier to the cCount property being bound in the template (assuming that your component has a cCount property):

<cart :c-count.sync="cCount"></cart>

And in the script for the cart component emit an update:cCount event when the count is incremented:

methods: {
  incrementCount() {
    this.cartCount++;
    this.$emit('update:cCount', this.cartCount);
  }
}

This will automatically set the value of the parent Vue instance's cCount property to the value of the cart component's cartCount property.

Here's a working fiddle.

---

This feature is available starting in Vue version 2.3.0, but if you are using an earlier version, this would give you the same functionality:

<cart :c-count="cCount" @update:foo="val => cCount = val"></cart>

This is because <comp :foo.sync="bar"></comp> is just syntactic sugar for:

<comp :foo="bar" @update:foo="val => bar = val"></comp>