Tengo una situación como esta: en un componente llamado "ProductForm" tengo un método "addToCart", que agregará algún producto a un carrito en una tienda en línea. Esto se llama mediante un evento de clic de botón.

Ahora agregué un nuevo componente secundario "GiftUpsell", que es esencialmente solo un botón adicional "Agregar al carrito". Pero además debería agregar otro producto, pasado como parámetro a handleAddToCart.

Así que modifiqué el método handleAddToCart en ProductForm para aceptar un parámetro opcional, como se muestra a continuación, y paso este parámetro a través de un evento del componente secundario "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); } } }

El problema ahora es: cuando uso el nuevo botón de agregar al carrito de ventas adicionales, funciona bien. El parámetro lineItem se pasa como el único parámetro para handleAddToCart y la lógica funciona.

Sin embargo, cuando hago clic en el antiguo botón "normal" de agregar al carrito, el método handleAddToCart obtiene el $event como primer parámetro, que no está presente cuando se llama a handleAddToCart a través del evento upsell upsell-add-to-cart .

Esto es confuso. ¿Por qué está presente el parámetro $event cuando no lo necesito, y solo están presentes los parámetros de evento (pero no el objeto de evento) cuando necesito los parámetros? ¿Hay alguna manera de deshacerse de esta inconsistencia?