Vue Multiselect无法获取select$对象问题求助

问题描述 #

使用Vueform Multiselect组件时，需要通过@search-change事件获取select$.filteredOptions，但封装中间组件SelectComponent后，父组件接收的select$参数始终为undefined。

相关代码场景：

• 父组件调用封装组件：

<SelectComponent v-model="countryId" :options="countries" />

• 初始封装的SelectComponent.vue：

<Multiselect
  :options="options"
  @search-change="inputQuery"
/>

• 尝试事件转发后的SelectComponent.vue片段：

<Multiselect
  @search-change="inputQuery"
/>

<script>
export default {
  emits: ['search-change'],
  methods: {
    inputQuery(query, select$) {
      this.$emit('search-change', query, select$);
    }
  }
}
</script>

• 父组件事件处理方法：

methods: {
  inputQuery(query, select$) {
    console.log(query, select$); // select$为undefined
  }
}

解决方案 #

1. 修正父组件的事件绑定格式 #

Vue自定义事件需使用kebab-case格式，父组件若写@searchChange会无法匹配封装组件抛出的search-change事件，需改为：

<SelectComponent 
  v-model="countryId" 
  :options="countries"
  @search-change="inputQuery"
/>

2. 验证封装组件是否接收到select$参数 #

先在SelectComponent的事件处理方法中打印参数，确认是否从Multiselect组件正常接收到select$：

inputQuery(query, select$) {
  console.log('SelectComponent内的select$:', select$); // 先确认此处是否有值
  this.$emit('search-change', query, select$);
}

• 如果此处select$为undefined，说明是Multiselect组件本身的问题（如版本差异、配置缺失），需检查组件版本或相关配置；
• 如果此处有值，说明转发逻辑正常，问题出在父组件的事件绑定。

3. 确保封装组件的事件转发完整 #

以Vue 3的<script setup>语法为例，给出完整的封装组件代码，确保参数传递无遗漏：

<template>
  <Multiselect
    :options="options"
    :model-value="modelValue"
    @update:model-value="$emit('update:model-value', $event)"
    @search-change="handleSearchChange"
  />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    required: true
  },
  options: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['update:model-value', 'search-change']);

const handleSearchChange = (query, select$) => {
  emit('search-change', query, select$);
};
</script>

验证 #

完成上述修改后，在父组件的inputQuery方法中再次打印select$，即可正常获取Multiselect的Proxy对象，进而访问select$.filteredOptions。

内容的提问来源于stack exchange，提问作者Евгений Гедройц