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

Question

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

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

因此，我修改了 ProductForm 中的 handleAddToCart 方法以接受可选参数，如下所示，并通过子组件“GiftUpsell”的事件传递此参数：

产品表单.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时该参数不存在。handleAddToCartupsell-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)" />