Vue3 点击Add to order按钮时如何重置对应Counter组件计数

你只需要做两处修改，就能实现点击加购后重置对应行计数器的需求，核心是让父组件可以拿到对应计数器组件的实例，调用它内部已经写好的reset方法。 #

1. 给Counter组件暴露reset方法 #

<script setup>语法默认会把组件内部的所有方法、变量都设为私有，父组件无法直接访问。你只需要在Counter组件的script末尾加defineExpose，把reset方法暴露出去即可：

<script setup>
import {ref} from "vue"

let count = ref(1)

let increase = () => {
  count.value++
}

let decrease = () => {
  if(count.value === 1) return
  count.value--
}

let reset = () => {
  count.value = 1
}

// 新增：暴露reset方法供父组件调用
defineExpose({ reset })
</script>

2. 父组件绑定循环内的组件实例，点击时触发重置 #

首先在父组件的script里新增一个响应式对象，用来存储每个商品对应的计数器实例：

// 按商品id存储对应Counter组件实例
const counterRefs = ref({})

然后修改模板里循环渲染的Counter组件，用函数式ref把实例存到上面的对象里，同时修改Add to order的点击逻辑，加购完成后调用对应实例的reset方法：

<p v-for="product in filteredProducts"
    :key="product.id">{{ product.name }}

  <!-- 绑定ref，按product.id存储实例 -->
  <CounterComponent :ref="el => { if(el) counterRefs.value[product.id] = el }" />

  <span @click="
    tableOrderStore.addToOrder(product);
    // 调用对应计数器的重置方法
    counterRefs.value[product.id].reset();
    $emit('productAdded')
  ">Add to order</span>
</p>

备选简易方案 #

如果你不想处理组件实例暴露和引用的逻辑，也可以用动态key强制组件重挂载实现重置：给Counter组件绑定带版本号的key，点击加购时修改对应商品的key值，组件会自动重新初始化，count就会回到默认值1。不过这个方案会销毁重建组件，只适合计数器没有其他复杂内部逻辑的场景。

// 父组件script里加
const counterResetVersion = ref({})

<!-- 模板里改Counter绑定 -->
<CounterComponent :key="`counter-${product.id}-${counterResetVersion.value[product.id] || 0}`" />

<!-- 点击事件里新增重置key的逻辑 -->
<span @click="
  tableOrderStore.addToOrder(product);
  counterResetVersion.value[product.id] = (counterResetVersion.value[product.id] || 0) + 1;
  $emit('productAdded')
">Add to order</span>

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