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

<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>

<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>