如何在自定义Vue select组件中绑定并使用@change事件？

解决方案 #

你遇到的问题核心是自定义组件没有将内部v-select的change事件向外透传，父组件自然无法监听触发。可以按以下两种方案实现：

方案1：手动透传change事件

在你的自定义select组件的<v-select>标签上新增change事件监听，手动向外触发事件即可：

<v-select v-if="inputType === 'select'"
                  @input="updateValue($event)"
                  @change="$emit('change', $event)" <!-- 新增这一行 -->
                  :background-color="backgroundColor ? 'backgroundColor' : 'white'"
                  class="rounded-lg"
                  :clearable="clearable"
                  :chips="chips"
                  color="accent2"
                  :deletable-chips="deletableChips"
                  :disabled="disabled || isFormReadOnly"
                  :error="error"
                  :error-messages="errorMessages"
                  filled
                  flat
                  hide-details="auto"
                  :items="items"
                  :item-text="itemText && itemText"
                  item-value="value"
                  :label="label"
                  :multiple="multiple"
                  :outlined="!outlined && !isFormReadOnly"
                  :return-object="returnObject"
                  :small-chips="smallChips"
                  :value="value"/>

修改完成后，在调用组件时直接绑定@change事件即可触发自定义函数：

<app-input input-type="select"
           class="rounded-lg mb-4"
           :class="$vuetify.breakpoint.width >= 600 && 'pl-2'"
           :error="errors.type"
           :is-form-read-only="isFormReadOnly"
           :items="['Drill', 'Emergency']"
           label="Type"
           v-model="form.type"
           @change="你要触发的自定义函数名"/>

方案2：批量透传所有事件（适合通用封装场景）

如果你需要让自定义组件支持监听内部v-select的所有原生事件（比如@blur、@focus等），不需要逐个手动写emit，可以直接用事件透传语法：

• Vue2环境：在<v-select>标签上加v-on="$listeners"
• Vue3环境：在<v-select>标签上加v-bind="$attrs"（Vue3的$attrs已包含事件监听器）

Vue2环境示例：

<v-select v-if="inputType === 'select'"
                  @input="updateValue($event)"
                  v-on="$listeners" <!-- 新增这一行，透传所有父组件绑定的事件 -->
                  <!-- 其余原有属性保持不变 -->
                  :value="value"/>

注意事项

Vuetify的v-select组件中，@input事件会在值发生变化时立即触发，@change事件会在用户确认选中选项后触发，两者触发时机有差异，可根据业务需求选择监听对应的事件。

内容的提问来源于stack exchange，提问作者Richard KeMiKaL GeNeRaL Denton