event name in child component that passes data to parent component

Question

In a Vue Native project I have been passing eventName as a prop from the parent component to the child component and then having the child component emit this eventName back to the parent component with whatever data it is providing to the parent. Here is an example with the pertinent sections of code shown:

parent: settings.vue

// code in template
<dynamic-picker
  @event-setting1="(value) => setting1 = value"
  :eventName="'event-setting1'"
  :value="setting1"
  :choices="config.picker.setting1.choices"
/>

<dynamic-picker
  @event-setting2="(value) => setting2 = value"
  :eventName="'event-setting2'"
  :value="setting2"
  :choices="config.picker.setting2.choices"
/>

<dynamic-picker
  @event-setting3="(value) => setting3 = value"
  :eventName="'event-setting3'"
  :value="setting3"
  :choices="config.picker.setting3.choices"
/>

// code in script
import DynamicPicker from '../../../components/dynamic-picker.vue';

export default {
  components: {
    DynamicPicker
  }
}

child: dynamic-picker.vue

// code in template
  <dynamic-picker
    :items="choices"
    :selected="selected"
    :onValueChange="(value) => $emit(eventName, value)"
  />

// code in script
props: ['value', 'eventName', 'choices']

However, it seems to work if the child has a static event name, in which case the code changes to this:

parent: settings.vue

// code in template
<dynamic-picker
  @event-setting="(value) => setting1 = value"
  :value="setting1"
  :choices="config.picker.setting1.choices"
/>

<dynamic-picker
  @event-setting="(value) => setting2 = value"
  :value="setting2"
  :choices="config.picker.setting2.choices"
/>

<dynamic-picker
  @event-setting="(value) => setting3 = value"
  :value="setting3"
  :choices="config.picker.setting3.choices"
/>

child: dynamic-picker.vue

// code in template
  <dynamic-picker
    :items="choices"
    :selected="selected"
    :onValueChange="(value) => $emit('event-setting', value)"
  />

// code in script
props: ['value', 'choices']

While I like this second approach better than the first because it is simpler, I don't understand why it works without causing issues. How can the child component be called multiple times in the parent file and emit the same event name no matter whether setting1, setting2 or setting3 is calling it without causing problems? I search the Vue docs but did not see this addressed.

Edit: Two clarifications -

1. The dynamic-picker tag that appears in dynamic-picker.vue is imported as follows into that file:

   import DynamicPicker from './dynamic-picker.js';

2. Added code above that appears in script tags for settings.vue.

Answer 1

If I understand your question correctly, each dynamic-picker tag maps to its own unique instance of a dynamic-picker component. As such, there is a one to one mapping from a given dynamic-picker to its parent, and only that one parent will hear an emit from the child.

For example, the first tag in the parent corresponds with child instance one, the second tag in the parent corresponds with child instance two, etc. Now, only the first tag is the parent of instance one. So, only the first tag will respond to an emit from instance one.