Vue使用$emit父子传值时数组长度首次点击不更新计数错误

安全阿岳

2026-9-25

问题根因

子组件的事件触发顺序有误：你将action方法绑定到了span的click事件上，点击时会先执行action方法向父组件传值，此时checkbox的v-model还未完成checkedBrands的更新，因此第一次emit给父组件的是修改前的旧值，等click事件执行完成后v-model才会更新数据，就出现了计数滞后一次的现象。

解决方案（二选一即可，推荐第一种）

方案1：将事件绑定到checkbox的@change事件上（change事件会在checkbox值更新完成后触发，拿到的永远是最新值）
子组件模板修改为：
```
<label class='custom-checkbox'>
 <input type='checkbox' :value='item.title' v-model='checkedBrands' @change="action">
 <span>{{ item.title }}</span>
</label>
```
原有action方法无需修改。
方案2：在action方法中添加$nextTick，等待数据更新完成后再传值
子组件action方法修改为：
```
action() {
  this.$nextTick(() => {
    this.$emit('action', this.checkedBrands);
  })
}
```