Notify parent component as soon as event occurs in child event?

Question

I need that when a user clicks a button on the child component the parent component receives cart.lenght to be assigned the count property of an element.

Child component code

<q-btn flat round color="faded" icon="fas fa-shopping-cart" @click="cart(item.id)"/>

cart: function (Id) {
      let cart = []
      cart.push(Id)
      this.$emit('totalItensCart')
      this.$q.localStorage.set('cart', cart)
}

How do I display the cart.length value in the count property that is in the parent component?

Parent component code

 <q-route-tab
        count="5"
        icon="fas fa-cart-plus"
        to="/cart"
        exact
 slot="title"/>

Answer 1

As per the vue event documentation, we want to emit an event from the child component to the parent component. You are correct with the this.$emit method, but it can take two parameters in order to pass data, like so:

this.$emit("name", data);

So, let's emit a count of the number of items in the cart from the first child:

this.$emit("cartUpdate", cart.length);

---

Now we need to handle this in the parent. We'll first need a data property to keep track of the totalCartItems in the parent:

data: function () {
    return {
        totalCartItems: null
    }
}

Assuming that both of your code snippets are in different children of the same parent, and that the first child (the one that emits cartUpdate) has the component name first-child:

<first-child @cartUpdate="cartUpdate"></first-child>

This will call the cartUpdate() method in the parent component whenever the child emits an event called cartUpdate (using the @ shorthand for v-on). The method is very simple, only updating the totalCartItems data property in the parent:

cartUpdate: function (totalCartItems) {
    this.totalCartItems = totalCartItems;
}

---

Finally, let's ensure this gets updated in the second child component by binding it to the data value:

<q-route-tab
        :count="totalCartItems"
        icon="fas fa-cart-plus"
        to="/cart"
        exact
 slot="title"/>