VueJS 3父组件向子组件多选框传递数据问题求助

DevOps 小满

2026-8-3

解决Vue父组件向子组件传递下拉数据的问题

问题根源

你当前的实现存在两个核心问题：

父组件无需通过传递函数的方式返回数据，直接传递uniquelocations本身即可
子组件里的Multiselectlocation绑定的options="uniquelocations"，但子组件并未定义这个变量，也没有正确调用父组件传递的函数来获取数据

正确实现方式（推荐：直接传递数据）

父组件代码调整

直接把父组件的uniquelocations作为props传给子组件，不需要额外方法：

<Child       
  @on-reset="resetForm"
  :uniqueLocations="uniquelocations" />

子组件代码调整

在props中定义接收数据的属性（遵循Vue小驼峰命名规范）
把Multiselectlocation的options绑定到接收的props上

<Multiselectlocation
  :hide-selected="true"
  role="combobox"
  aria-expanded="false"
  aria-label="combobox"
  title="Select a location"
  id="MultiLocation"
  v-model="locations"
  :options="uniqueLocations" <!-- 绑定接收的props数据 -->
  :close-on-select="true"
  mode="tags"
  :searchable="true"
  placeholder="Select a location(s)"
  :track-by="trackBy"
  @search-change="results"
/>

<script>
export default {
  props: {
    uniqueLocations: {
      type: Array, // 根据实际数据类型调整，比如数组/对象
      required: true
    },
  },
  // 其他逻辑代码
}
</script>

若必须通过函数传递（仅作参考，不推荐）

如果因特殊需求必须传递函数获取数据，子组件需要调用函数拿到数据后再使用：

<Multiselectlocation
  :options="passUniqueLocations()" <!-- 调用父组件传递的函数获取数据 -->
  <!-- 其他属性保持不变 -->
/>

<script>
export default {
  props: {
    passUniqueLocations: {
      type: Function,
      required: true
    },
  },
  // 其他逻辑代码
}
</script>