0

在一个 Vue Native 项目中，我一直eventName作为道具从父组件传递给子组件，然后让子组件将其eventName发送回父组件，并使用它提供给父组件的任何数据。这是一个示例，其中显示了相关的代码部分：

父：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
  }
}

孩子：动态选择器.vue

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

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

但是，如果孩子有一个静态事件名称，它似乎可以工作，在这种情况下，代码会更改为：

父：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"
/>

孩子：动态选择器.vue

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

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

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

编辑： 两个澄清 -

  1. 出现在 dynamic-picker.vue 中的动态选择器标签按如下方式导入到该文件中：

    从'./dynamic-picker.js'导入DynamicPicker；

  2. 添加了上面出现在 settings.vue 的脚本标签中的代码。

4

1 回答 1

0

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

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

于 2020-08-02T21:37:16.557 回答