Vue2+Vuetify中如何给子组件传递带change事件的v-model

拆分组件后筛选功能失效的核心原因是：子组件没有将筛选器的最新选中状态传递给父组件，导致父组件绑定的model数据没有更新，筛选逻辑无法触发。当前的自定义事件仅触发了通知，但没有携带关键的选中值参数，父组件无法感知状态变化。

修复步骤 #

1. 子组件修改：传递选中值到父组件

修改v-btn-toggle的@change事件，将选中的新值通过自定义事件传递出去：

<v-sheet elevation="1" height="100%" outlined rounded width="100%">
    <h3 style="margin: 10px">Game providers</h3>
    <v-btn-toggle
      :value="value.allPset"
      block
      @change="$emit('set-all-provider-filter', $event)"
      style="display: block"
    >
      <v-btn block dark style="margin-top: 10px">
        All providers
        <v-spacer />
        <v-chip>{{ allGamesSum }}</v-chip>
      </v-btn>
    </v-btn-toggle>
    <v-btn-toggle
      :value="value.vendorFilter"
      @change="$emit('set-provider-filter', $event)"
      block
      multiple
      style="display: block"
    >
      <v-btn
        v-for="(item, i) in vendorList"
        :key="i"
        :value="item.name"
        height="30px"
        block
        dark
        style="margin-top: 1px"
        ><img style="background-color: transparent" :src="item.src" />
        <v-spacer />
        <v-chip small>{{ item.gameSum }}</v-chip>
      </v-btn>
    </v-btn-toggle>
  </v-sheet>

2. 父组件修改：接收参数并更新model

在父组件的事件处理函数中，接收子组件传递的新值，同步更新model的对应属性，并补充全选/单选的互斥逻辑：

// 父组件methods
methods: {
  setAllProviderFilter(newAllPset) {
    this.model.allPset = newAllPset;
    // 全选时清空供应商筛选列表（根据业务逻辑调整）
    if (newAllPset) {
      this.model.vendorFilter = [];
    }
  },
  setProviderFilter(newVendorFilter) {
    this.model.vendorFilter = newVendorFilter;
    // 选中供应商时取消全选状态
    if (newVendorFilter.length > 0) {
      this.model.allPset = 0;
    }
  }
}

可选优化：用Vue2规范的自定义v-model简化逻辑 #

Vue2中自定义组件的v-model默认遵循value prop + input事件的约定，可以将两个自定义事件合并为一个input事件，减少事件绑定：

子组件修改

props: ['value', 'vendorList', 'allGamesSum'],
methods: {
  handleAllToggle(newVal) {
    const updatedModel = { ...this.value, allPset: newVal };
    if (newVal) updatedModel.vendorFilter = [];
    this.$emit('input', updatedModel);
  },
  handleVendorToggle(newVal) {
    const updatedModel = { ...this.value, vendorFilter: newVal };
    if (newVal.length) updatedModel.allPset = 0;
    this.$emit('input', updatedModel);
  }
}

对应模板中的事件改为调用上述方法：

@change="handleAllToggle($event)"
@change="handleVendorToggle($event)"

父组件简化

无需再绑定两个自定义事件，仅保留v-model即可：

<game-providers
  :allGamesSum="allGamesSum"
  :vendorList="vendorList"
  v-model="model"
></game-providers>

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