child 组件中将数据传递给 parent 组件的事件名称

Question

在 Vue Native 项目中，我一直将 eventName 作为道具从 parent 组件传递到 child 组件，然后让 child 组件发出这个eventName 返回 parent 组件及其提供给 parent 的任何数据。以下是显示相关代码部分的示例：

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']

但是，如果 child 具有静态事件名称，它似乎可以工作，在这种情况下，代码将更改为：

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']

虽然我比第一种方法更喜欢第二种方法，因为它更简单，但我不明白为什么它可以工作而不会引起问题。 child 组件如何在 parent 文件中被多次调用并发出相同的事件名称，无论是 setting1、setting2 还是 setting3 正在调用它不会引起问题？我搜索了 Vue 文档，但没有看到这个地址。

编辑： 两点说明 -

出现在dynamic-picker.vue中的dynamic-picker标签按如下方式导入该文件：

从'./dynamic-picker.js'导入DynamicPicker；
在 settings.vue.
的脚本标签中添加了上述代码

Answer 1

如果我对你的问题的理解正确，每个 dynamic-picker 标签都映射到它自己唯一的 dynamic-picker 组件实例。因此，存在从给定 dynamic-picker 到其父级的一对一映射，并且只有一个父级会听到子级发出的信号。

例如，父级中的第一个标签对应子实例一，父级中的第二个标签对应子实例二，等等。现在，只有第一个标签是实例一的父级。因此，只有第一个标签会响应来自实例 1 的发射。

child 组件中将数据传递给 parent 组件的事件名称

event name in child component that passes data to parent component

vue.js

vue-native