Vue 事件处理程序有时会传递 $event 对象，有时不会

Question

我有这样的情况：在一个名为“ProductForm”的组件中，我有一个方法“addToCart”，它将一些产品添加到在线商店的购物车中。这是通过按钮单击事件调用的。

现在我添加了一个新的子组件“GiftUpsell”，它本质上只是一个额外的“添加到购物车”按钮。但它应该另外添加另一个产品，作为参数传递给 handleAddToCart。

所以我修改了 ProductForm 中的 handleAddToCart 方法以接受一个可选参数，如下所示，我通过子组件“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);
    }
  }
}

现在的问题是：当我使用新的加售添加到购物车按钮时，它工作正常。 lineItem 参数仅作为参数传递给 handleAddToCart，逻辑有效。

但是，当我单击旧的“正常”添加到购物车按钮时，handleAddToCart 方法将 $event 作为第一个参数 - 当 handleAddToCart 通过 upsell-add-to-cart 事件调用。

这令人困惑。为什么在我不需要时出现 $event 参数，而在我需要参数时只出现事件参数（而不是事件对象）？有没有办法消除这种不一致？

Answer 1

v-on 指令在仅给出方法名称时自动将事件数据传递给指定的方法。这就是模板中两个 @click 绑定所发生的情况，也是使发出的数据 (lineItem) 能够到达 handleAddToCart.

的原因

这两个模板是等价的：

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

<btn @click.native="handleAddToCart($event)">Add to Cart</btn>
<gift-upsell @upsellAddToCart="handleAddToCart($event)" />

在第一个 <btn @click> 绑定中，按钮的 click 事件数据（MouseEvent）作为参数传递给 handleAddToCart。要使 <btn> 的点击不传递任何内容，您可以更新绑定以不带参数调用 handleAddToCart：

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

或者对两个 v-on 绑定都明确：

<btn @click.native="handleAddToCart()">Add to Cart</btn>
<gift-upsell @upsellAddToCart="handleAddToCart($event)" />

Vue 事件处理程序有时会传递 $event 对象，有时不会

Vue event handler sometimes getting $event object passed and sometimes not

vue.js

nuxt.js