Using multiple $emits in one method

Please advise me on this more theoretical question.

I need to create some custom elements in the project. And for different variants to add styles and methods.

And I have a question about methods and $emit.

For example, the tag input.

I can get the value of the field from the component via $emit.

<input @change="changeInput" />

export default {
  methods: {
    changeInput() {
      this.$emit('changeInput')
    }
  }
}

At this stage, two questions arise.

1. If I run two $emit with different parameters in the same method, but use only one of them, will the other still be triggered and create an additional load? For example:

// Input component
<input @change="changeInput" />

export default {
  methods: {
    changeInput(event) {
      this.$emit('changeInput', event)
      this.$emit('changeInputValue', event.target.value)
    }
  }
}

//Parent component
<MyInput @changeInput="changeInput" />

2. If, for example, for an input I use only one $emit but with all its value, even though most places only need its individual values. Would the load of passing values be greater than using the individual parts? For example:

// Input component
<input @change="changeInput" />

export default {
  methods: {
    changeInput(event) {
      this.$emit('changeInput', event)
    }
  }
}

//Parent component
<MyInput @changeInput="changeName" />
<MyInput @changeInput="changeEmail" />
<MyInput @changeInput="getInput" />

export default {
  data: () => ({
    name: '',
    email: '',
    input: {}
  }),
  methods: {
    changeName(event) {
      this.name = event.target.value
    },
    changeEmail(event) {
      this.email = event.target.value
    },
    getInput(event) {
      this.input = event
    }
  }
} 

On the one hand, the whole object is always transferred here, and it can be used as you want if necessary. But if in most cases only the value of this input tag is used, does it make sense to always pass the whole object? Or is it better to make several $emit for all conditions:

changeInput(event) {
  this.$emit('changeInput', event)
  this.$emit('changeInputTarget', event.target)
  this.$emit('changeInputValue', event.target.value)
}

Here I wrote a single input, but what if it's a component with a big data object? And depending on the case, it needs to be passed through $emit either partially or completely. What's the best way to proceed in such cases?

I have used several $emit with different values, as well as a common one. Globally, this has no effect on performance. But suddenly, if you increase the number of components, you may end up with problems. I'd like to ensure as much performance as possible in any of the projects.

Both emits would execute, and cause additional load

It is sometimes tempting to think of an $emit as a return. But it isn't. It does not "end" the component, or the function it is in. It is executed, and then the next $emit is executed in turn.

      this.$emit('changeInput', event)
      this.$emit('changeInputValue', event.target.value)

The load of passing the bigger object will not be significantly larger

Something is going to have to unwrap event to event.target.value. Either the child component or the parent component.

If you think you will ever need the "bigger" object, then pass the bigger object consistently.

i.e. do not do two $emits, just do this:

      this.$emit('changeInput', event)