Vuetify3组件未监听input事件的emit作用及优化方案咨询

一、$emit('input')的作用 #

这些emit是组件向父组件传递筛选状态更新的核心逻辑：

• 第一条：合并已有筛选条件this.value与批量筛选字段qFields，将完整的筛选集合传递给父组件
• 第二条：把当前选中字段field和输入文本text作为新筛选规则，合并到已有条件后传递给父组件，用于添加单个筛选项
• 第三条：从已有筛选条件中移除指定key对应的规则，将更新后的集合传递给父组件，用于删除筛选标签

在Vuetify 2中，this.value是组件通过v-model绑定的父组件传入值，自带getter/setter，所以触发input事件能同步更新父组件的v-model；但Vuetify 3里组件未定义value属性，也没有监听input事件，导致这些emit当前完全无效。

二、方案选择与调整建议 #

选择方案3，结合Vuetify 3和Vue 3的规范进行调整，具体步骤如下：

1. 声明组件的modelValue属性
   在组件的props中定义modelValue，用于接收父组件通过v-model传入的筛选条件：

props: {
  modelValue: {
    type: Object,
    default: () => ({})
  }
}

2. 替换emit事件类型
   将所有$emit('input', ...)替换为Vue 3v-model标准的$emit('update:modelValue', ...)：

• 原代码：this.$emit('input', { ...this.value, ...qFields })
  修改为：this.$emit('update:modelValue', { ...this.modelValue, ...qFields })
• 原代码：this.$emit('input', { ...this.value, [this.field]: this.text })
  修改为：this.$emit('update:modelValue', { ...this.modelValue, [this.field]: this.text })
• 原代码：this.$emit('input', omit(this.value, key))
  修改为：this.$emit('update:modelValue', omit(this.modelValue, key))

3. 父组件同步适配
   如果父组件原本使用v-model绑定该组件，Vue 3默认已适配modelValue和update:modelValue，无需额外修改；若父组件之前手动监听@input，则需改为监听@update:modelValue。

排除其他方案的原因 #

• 方案1删除emit：会导致父组件完全无法接收筛选条件的更新，组件筛选功能彻底失效
• 方案2重构this.value再emit：不符合Vue 3和Vuetify 3的规范，value已不是当前版本v-model的标准绑定属性，后续维护会存在隐患

内容的提问来源于stack exchange，提问作者user3534080