如何将 @change 添加到自定义 Vue 组件

Question

我四处寻找，找不到解决问题的方法，所以我希望有人能提供帮助。

我已经创建了几个自定义表单组件，但我仍然必须恢复到“原始”代码来完成一些任务，因为我找不到在自定义 select 上使用 @change 的方法。

这是我平时做的事情……

自定义select 组件 - 省略了道具和方法：

<v-select v-if="inputType === 'select'"
                  @input="updateValue($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"/>

...我这样称呼它：

<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 调用更改函数。

有什么想法吗？

Answer 1

您是否尝试过选择组件：

@change="$emit('change', $event.target.value)"

Answer 2

我想你可以试试$emit 或者在实例中写一个watch