Parent component data doesn't receive using this.$emit

The addCount was received in devtools but in the parent component doesn’t receive… i don’t know what is the problem…
The cartdetailmodel component is inside cartlisting component.

child component

      console.log('test cart');
      let currentCart = JSON.parse(TokenService.getCustomToken("cartData") as string);

      (currentCart).forEach((value, index)=>{
        this.cartItemcount = index + 1;
      console.log('CartitemCountoutside: ', this.cartItemcount);
      this.$emit('addCount', this.cartItemcount);

parent component

 <CartDetailModal v-on:addCount="getCartItemcount($event)" v-show="HideCartd"></CartDetailModal>


in the parent component you should declare the event handler that’s being called, like

function getCartItemcount(count) {
  console.log(`You added ${count} items.`)

For a custom event you only need to provide the method name in kebab-case: use @add-count not @addCount. You don’t need to pass an argument for the function here. The code emitting the event is providing the actual payload: this.cartItemcount


You only need $event for native DOM events like click or change where you want to add extra payload for the event handler, change the arguments order, but also want to examine the original DOM event that got triggered. For native DOM events this would exclusively be the first and only argument passed to the event handler, but Vue allows to pass more argument and change the order; that’s what $event is for.

  @click="myClickHandler(42, 'Magic 🧙🏻‍♀️', $event)" />

For this to work your click event handler would look like

function myClickHandler(count, message, clickEvent) {
  // .target == the actual DOM element being clicked

If the user clicks the component, the original mouse event object would be the third argument passed to myClickkHandler

Hope this helps,