在Vue中向自定义事件传递多个参数

Question

根据Vue文档-我链接到相关页面-我可以通过键入<ChildComponent @click="$emit('myEvent', 1)" />来发出一个自定义事件和一个值，如果父组件上的事件处理程序是一个方法，则该值将作为其参数传递。但是，如果我想在父组件中调用处理程序时将另一个参数传递给它，该怎么办？我可以简单地编写<ParentComponent @myEvent="eventHandler(2)" />，然后让函数接受两个参数吗？

function eventHandler(childArgument, parentArgument) {
// I want to have access to the value 1 from the child and the value 2 from the parent component here.
// If I do it like this, will childArgument contain the 1 and parentArgument the 2?
}

如果这不起作用，我该怎么做？

Answer 1

我最近刚刚在我的项目中做了这件事。在您的ChildComponent和ParentComponent示例中，您可以使用

<ChildComponent @click="$emit('myEvent', 1)" />

<ParentComponent @myEvent="eventHandler(2, ...arguments)" />

那么你的事件处理程序会像这个

function eventHandler(parentArgument, childArgument) { ... }

你可能可以根据自己的意愿更改顺序，但这对我很有效。此外，我认为建议对html元素使用kebab大小写。