如何知道vue.js 3中哪个孩子正在发出事件

Question

如果我有一个组件：

<product-display 
:premium="premium" 
:cart="cart" 
@add-to-cart='updateCart' 
@remove-from-cart='removeById'>
</product-display>

使用以下两种方法：

methods: {
removeFromCart() {
this.$emit('remove-from-cart', this.variants[this.selectedVariant].id)
},
addToCart() {
this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
},

父母有以下方法：

methods: {
updateCart (id) {
this.cart.push(id)
},
removeById(id) {
const index = this.cart.indexOf(id)
if (index > -1) {
this.cart.splice(index, 1)
}
}
}

有没有办法从父对象中删除一个方法，并只使用updateCart(id)来知道从哪个子对象发出事件？

因此，在HTML中，您最终会得到：

@add-to-cart='updateCart' 
@remove-from-cart='updateCart'

Answer 1

您可以通过几种不同的方式来实现这一点。我喜欢的是这样的：

// Component.vue
updateCart(action) {
this.$emit('update-cart', {
id: this.variants[this.selectedVariant].id), action
}

//Parent.vue
@update-cart='updateCart'
methods: {
updateCard({id, action}) {
if (action == 'add') {
return this.cart.push(id);
}
this.card = this.card.filter(x => x != id);
}
}