vue 实现 checkbox批量删除

前置知识点：

1. Vue 基础语法
2. Vue 组件基础
3. Vue 自定义事件
4. Vue 数据双向绑定

实现步骤：

1. 创建一个 Vue 组件，包含一个 checkbox 列表和一个删除按钮。

2. 在组件的 data 中定义一个数组，存储 checkbox 的选中状态，初始值为 false。

3. 在组件中使用 v-for 循环生成 checkbox 列表，并绑定选中状态。同时使用 v-model 与 data 中的选中状态进行双向绑定。

4. 在组件中定义一个方法，用于处理删除按钮的点击事件。该方法会遍历 data 中的选中状态，将为 true 的项从数组中删除。

5. 在组件中定义一个自定义事件，用于在删除操作完成后通知父组件更新数据。在删除方法中触发该自定义事件。

6. 在父组件中使用该组件，并传入一个数组作为数据源。同时监听自定义事件，当接收到该事件时更新数据源。

下面是代码示例：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="checkedList[index]">{{ item }}
    </div>
    <button @click="deleteItems">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      checkedList: new Array(this.list.length).fill(false)
    }
  },
  methods: {
    deleteItems() {
      for (let i = this.checkedList.length - 1; i >= 0; i--) {
        if (this.checkedList[i]) {
          this.list.splice(i, 1)
        }
      }
      this.$emit('update:list', this.list)
    }
  }
}
</script>

在父组件中使用该组件：

<template>
  <div>
    <checkbox-list :list="data" @update:list="data = $event"></checkbox-list>
  </div>
</template>

<script>
import CheckboxList from './CheckboxList.vue'

export default {
  data() {
    return {
      data: ['item1', 'item2', 'item3', 'item4', 'item5']
    }
  },
  components: {
    CheckboxList
  }
}
</script>

这样就可以实现一个简单的 checkbox 批量删除组件。