I have a situation like this: In a component called "ProductForm" I have a method "addToCart", which will add some product to a cart in an online shop. This is called via button click event.

Now I added a new child component "GiftUpsell", which is essentially just an additional "Add to Cart" button. But it should additionally add another product, passed as parameter to handleAddToCart.

So I modified the handleAddToCart method in ProductForm to accept an optional parameter, as below, and I pass this parameter via an event from the child component "GiftUpsell":

ProductForm.vue

<template>
  <btn @click.native="handleAddToCart">Add to Cart</btn>
  <gift-upsell @upsellAddToCart="handleAddToCart" />
</template>

<script>
import GiftUpsell from '~/components/GiftUpsell'

export default {
  components: { GiftUpsell },
  methods: {
    handleAddToCart(upsellLineItem = null) {
      // ...
    }
  }
}

GiftUpsell.vue

<template>
  <btn @click.native="upsellAddToCart">Add to cart with upsell</btn>
</template>

<script>
export default {
  methods: {
    createUpsellLineItem() {
      // whatever
      return some object;
    },

    upsellAddToCart() {
      const lineItem = createUpsellLineItem();
      this.$emit('upsell-add-to-cart', lineItem);
    }
  }
}

The problem now is: When I use the new upsell add-to-cart button, it works fine. The lineItem parameter is passed as the only parameter to handleAddToCart and the logic works.

When I, however, click on the old, "normal" add-to-cart button, the handleAddToCart method gets the $event as first parameter - which is not present when handleAddToCart is called via the upsell-add-to-cart event.

This is confusing. Why is the $event parameter present when I don't need it, and only the event parameters present (but not event object) when I need the parameters? Is there a way to get rid of this inconsistency?