选中子项复选框时将id值发送到父组件

，可以通过以下步骤实现：

在子组件中，为复选框绑定一个事件监听器，当复选框状态改变时触发该事件。
在事件处理函数中，获取当前复选框的id值。
使用自定义事件或回调函数的方式，将id值发送给父组件。
在父组件中，接收子组件发送的id值，并进行相应的处理。

下面是一个示例代码，演示了如何实现上述功能：

子组件代码（ChildComponent.vue）：

<template>
  <div>
    <input type="checkbox" v-model="isChecked" @change="handleCheckboxChange">
    <label>{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    },
    label: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isChecked: false
    };
  },
  methods: {
    handleCheckboxChange() {
      if (this.isChecked) {
        // 发送id值给父组件
        this.$emit('checkbox-selected', this.id);
      }
    }
  }
};
</script>

父组件代码（ParentComponent.vue）：

<template>
  <div>
    <h2>已选中的子项：</h2>
    <ul>
      <li v-for="selectedId in selectedIds" :key="selectedId">{{ selectedId }}</li>
    </ul>
    <h2>子项列表：</h2>
    <child-component v-for="item in items" :key="item.id" :id="item.id" :label="item.label" @checkbox-selected="handleCheckboxSelected"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [
        { id: 1, label: '选项1' },
        { id: 2, label: '选项2' },
        { id: 3, label: '选项3' }
      ],
      selectedIds: []
    };
  },
  methods: {
    handleCheckboxSelected(id) {
      // 接收子组件发送的id值，并进行处理
      this.selectedIds.push(id);
    }
  }
};
</script>

在上述示例中，子组件（ChildComponent.vue）包含一个复选框和一个标签，当复选框状态改变时，会触发handleCheckboxChange方法。在该方法中，如果复选框被选中，则通过this.$emit方法发送checkbox-selected事件，并将id值作为参数传递给父组件。

父组件（ParentComponent.vue）中，使用v-for指令渲染子组件列表，并通过@checkbox-selected监听子组件发送的checkbox-selected事件。在handleCheckboxSelected方法中，接收到子组件发送的id值后，将其添加到selectedIds数组中，以便在页面上显示已选中的子项。

这样，当用户在子组件中选中复选框时，父组件会接收到相应的id值，并进行处理。