Vue中如何通过$emit触发事件取消勾选所有复选框？

原代码的问题 #

• 父组件按钮用$emit是错误用法：$emit是子组件向父组件发送事件的API，父组件要通知子组件不能这么用。
• 子组件的事件定义方向搞反了：你在子组件里定义的UncheckCheckbox是子组件向外触发的事件，不是用来接收父组件指令的。
• 子组件里的取消逻辑既没绑定触发时机，也没和父组件建立关联。

方案一：状态驱动（推荐，符合Vue单向数据流） #

让父组件统一管理所有复选框的选中状态，子组件完全由父组件的状态控制，父组件修改状态就能同步所有子组件。

App.vue 修改后代码

<template>
  <button @click="uncheckAll">Uncheck all boxes!</button>
  <div v-for="(d, index) in myArray" :key="index">
    <SelectComponent 
      :checked="checkedStates[index]" 
      @update:checked="(val) => checkedStates[index] = val" 
    />
  </div>
</template>

<script setup lang="ts">
import SelectComponent from './SelectComponent.vue';
import { ref } from 'vue';

// 模拟你的数据源
const myArray = ref([1, 2, 3]);
// 存储每个复选框的选中状态，初始全未选中
const checkedStates = ref(myArray.value.map(() => false));

// 取消所有复选框的方法
const uncheckAll = () => {
  checkedStates.value = checkedStates.value.map(() => false);
};
</script>

SelectComponent.vue 修改后代码

<template>
  <input 
    type="checkbox" 
    :checked="checked" 
    @change="$emit('update:checked', $event.target.checked)" 
  />
</template>

<script setup lang="ts">
// 接收父组件传递的选中状态
defineProps<{
  checked: boolean;
}>();
// 向父组件发送状态更新事件
defineEmits<{
  (event: 'update:checked', value: boolean): void;
}>();
</script>

方案二：通过ref调用子组件方法（适合简单场景） #

如果不想用状态管理，可以给子组件绑定ref，父组件通过ref直接调用子组件的取消方法。

App.vue 修改后代码

<template>
  <button @click="uncheckAll">Uncheck all boxes!</button>
  <div v-for="(d, index) in myArray" :key="index">
    <SelectComponent ref="selectRefs" />
  </div>
</template>

<script setup lang="ts">
import SelectComponent from './SelectComponent.vue';
import { ref } from 'vue';

const myArray = ref([1, 2, 3]);
// 存储所有子组件的引用
const selectRefs = ref<InstanceType<typeof SelectComponent>[]>([]);

const uncheckAll = () => {
  // 遍历所有子组件，调用取消方法
  selectRefs.value.forEach(component => {
    component.uncheckCheckbox();
  });
};
</script>

SelectComponent.vue 修改后代码

<template>
  <input type="checkbox" ref="checkboxRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const checkboxRef = ref<HTMLInputElement | null>(null);

// 定义取消复选框的方法
const uncheckCheckbox = () => {
  if (checkboxRef.value) {
    checkboxRef.value.checked = false;
  }
};

// 把方法暴露给父组件调用
defineExpose({
  uncheckCheckbox
});
</script>

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