Vue事件处理函数有时传入$event有时不传如何解决？

• 原生DOM事件绑定（比如你用的@click.native）如果直接写方法名不加括号，Vue会默认把原生事件对象$event作为唯一参数传入方法，这就是你点击普通加购按钮时第一个参数是事件对象的原因。
• 自定义事件的参数完全由$emit时传入的内容决定，没有默认自动添加的参数，你调用this.$emit('upsell-add-to-cart', lineItem)时只传了lineItem一个参数，所以触发handleAddToCart时就只会收到这一个参数。

方案1：原生事件绑定显式指定不传参数（最适配你当前需求） #

只需要修改ProductForm.vue的模板，给普通加购按钮的点击事件加空括号，告诉Vue不要自动传入$event：

<template>
  <!-- 加空括号，不传入任何参数，方法会自动使用默认值null -->
  <btn @click.native="handleAddToCart()">Add to Cart</btn>
  <gift-upsell @upsellAddToCart="handleAddToCart" />
</template>

改完后两种触发场景的参数就完全一致了：普通加购调用时upsellLineItem为默认值null，赠品加购调用时upsellLineItem为传入的商品对象。

方案2：统一参数结构（适用于需要保留原生事件对象的场景） #

如果你的业务逻辑需要用到原生点击事件对象，可以调整方法的参数顺序，固定第一个参数为事件对象，第二个参数为可选的加购商品：

1. 修改handleAddToCart的参数定义：

handleAddToCart(event, upsellLineItem = null) {
  // 业务逻辑
}

2. 调整两处事件绑定的传参：

<template>
  <!-- 原生事件显式传$event -->
  <btn @click.native="handleAddToCart($event)">Add to Cart</btn>
  <!-- 自定义事件第一个参数传null占位，第二个参数用$event指代emit传入的lineItem -->
  <gift-upsell @upsellAddToCart="handleAddToCart(null, $event)" />
</template>

你当前GiftUpsell.vue的代码存在可执行错误：upsellAddToCart方法中调用createUpsellLineItem需要加this，否则会抛出变量未定义的错误，修正后如下：

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

内容的提问来源于stack exchange，提问作者trollkotze