How to track multiple events on a component?

Question

Vue.js

The crux of the matter is, there is a Root element, it has a component that generates many events and changes the state of the Root,

<user-form v-bind:formprops='userProps' @is-active="userProps.isActive = !userProps.isActive" @first-name-input="userProps.firstName = $event" @last-name-input="userProps.lastName = $event"></user-form>

Maybe I'm doing something wrong, but a lot of @some-event is annoying, a knowledgeable person briefly said that you can somehow, roughly speaking, send the entire mutable object up, but I didn’t find anything, share the article or your solutions.

Answer 1

you can somehow, roughly speaking, send the entire mutable object upstairs

Can.
Or a key-value pair. In this case, the handler in the parent component will remain alone, and will look something like this:

methods: {
  onChange(e) {
    this.userProps[e.name] = e.val;
  }
}

Answer 2

there is vuex for that.

Answer 3

Where you emit events like first-name-input, add another change and really pass the entire object up at once. so many forms do