Vue3+TypeScript全选复选框按钮失效问题求助

1. 为什么全选复选框功能失效？ #

你直接修改itemRefs[i].checked的方式不符合Vue的响应式逻辑：

• 子组件内部的checked是ref对象，当通过setup返回时，Vue会自动对其解包，所以父组件通过ref访问到的itemRefs[i].checked是一个原始布尔值，而非ref对象。
• 你直接给这个原始值赋值，只是修改了子组件实例上的一个普通属性，并没有改变子组件内部checked ref的value。而子组件模板绑定的是内部的checked ref，自然不会触发DOM更新。

2. 为什么checked变量可访问但setCheck方法不可用？ #

核心原因是你对v-for的refs处理有误：

• Vue3中，给v-for的自定义组件绑定ref时，必须声明数组类型的ref（const itemRefs = ref([])），而非普通数组。如果用普通数组，itemRefs无法正确收集到子组件实例，你访问到的可能不是子组件实例，自然找不到setCheck方法。
• 另外你代码里调用setCheck时传的value是未定义变量，正确应该传isCheckServerAll.value。

正确实现方案 #

第一步：修正父组件的refs定义 #

确保itemRefs是数组ref，才能正确收集子组件实例：

const itemRefs = ref([]); // 必须用ref包裹数组

模板中绑定ref：

<checkbox-text-btn 
  v-for="item in list" 
  :key="item.id"
  ref="itemRefs"
  :btn-text="item.name"
/>

第二步：通过子组件方法更新状态 #

直接调用子组件暴露的setCheck方法，修改内部的checked ref：

const isCheckServerAll = ref(false);
const setCheckServerAll = () => {
  isCheckServerAll.value = !isCheckServerAll.value;
  itemRefs.value.forEach(child => {
    child.setCheck(isCheckServerAll.value);
  });
};

第三步：子组件状态同步回父组件 #

要实现子组件状态反向同步，子组件需要触发事件通知父组件：

// 子组件代码
export default defineComponent({
  name: "CheckboxTextButton",
  props: ["btnText"],
  emits: ['check-change'], // 声明要触发的事件
  setup(props, { emit }) { // 接收emit方法
    const checked = ref(false);

    const onClick = () => {
      checked.value = !checked.value;
      emit('check-change', checked.value); // 触发事件传递状态
    };

    const setCheck = (value) => {
      checked.value = value;
    };

    return {
      checked,
      onClick,
      setCheck,
    };
  },
});

父组件监听事件，维护选中状态：

const checkedList = ref([]); // 存储子组件选中状态

// 监听子组件状态变化
const handleCheckChange = (index, isChecked) => {
  checkedList.value[index] = isChecked;
  // 同步更新全选状态
  isCheckServerAll.value = checkedList.value.every(checked => checked);
};

模板绑定事件：

<checkbox-text-btn 
  v-for="(item, index) in list" 
  :key="item.id"
  ref="itemRefs"
  :btn-text="item.name"
  @check-change="handleCheckChange(index, $event)"
/>

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