Re-emit event with multiple parameters

Question

I am using a component that $emits an event with multiple values. Oftentimes, I just want to re-emit that same event up to higher parent component. When I try @input="$emit('input', $event)", it only re-emits the first parameter.

How can I emit both?

Answer 1

Option 1: Use a handler method:

<template>
  <component @input="emitInput" />
</template>

<script>
export default {
  methods: {
    emitInput(param1, param2) {
      this.$emit('input', param1, param2);
    },
  },
}
</script>

Option 2: Use an inline function:

<template>
  <component @input="(param1, param2) => $emit('input', param1, param2)" />
</template>

If using a render function, it will look like this:

render(createElement) {
  return createElement(MyComponent, {
    on: {
      input: (param1, param2) => this.$emit('input', param1, param2),
    },
});

Note: This method was inspired by Jacob Goh from his answer and subsequent comment to a similar question that I felt deserved its own question and answer.