我有這樣的情況：在名為“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 引數在我不需要時存在，而在我需要引數時只存在事件引數（而不是事件物件）？有沒有辦法擺脫這種不一致？
uj5u.com熱心網友回復：
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事件資料 (the MouseEvent) 作為引數傳遞給handleAddToCart。要使<btn>的 click 不傳遞任何內容，您可以將系結更新為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)" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344815.html