uniapp多选框传递数据

UniApp中的多选框（Checkbox）通常用于让用户选择多个选项，并将用户的选取作为数据传递给父组件或后端服务。要实现多选框的数据传递，你可以按照以下步骤操作：

1. 在`<template>`中定义一个多选框列表：

<view>
  <checkbox v-for="(item, index) in options" :key="index" :value="item.value" @change="onChange(item)">
    {{ item.label }}
  </checkbox>
</view>

在这里，`options`是一个数组，包含了你想要提供的各个选项（label和value）。

2. 创建一个Vue实例方法处理`@change`事件，当用户点击某个选项时，这个方法会被调用：

data() {
  return {
    options: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 },
      // ... 其他选项
    ],
    selectedOptions: []
  };
},
methods: {
  onChange(item) {
    if (item.checked) {
      this.selectedOptions.push(item.value); // 当前项被选中，添加到selectedOptions
    } else {
      const index = this.selectedOptions.indexOf(item.value);
      if (index !== -1) {
        this.selectedOptions.splice(index, 1); // 当前项未被选中，从selectedOptions中移除
      }
    }
  }
}

3. `selectedOptions`数组会记录用户选择的所有值。当你需要将这些数据传给父组件或者API时，可以直接发送这个数组，例如通过`emit`事件：

onSubmit() {
  this.$emit('selectedOptionsChanged', this.selectedOptions);
}

然后在父组件或调用者那里接收并处理数据：

<template>
  <uni-app>
    <child-component @selectedOptionsChanged="handleSelectedOptions"></child-component>
  </uni-app>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleSelectedOptions(selectedOptions) {
      console.log('用户选择了:', selectedOptions);
      // 进行进一步的操作，如提交到服务器
    },
  },
};
</script>