Vue自定义多选组件使用详解主要涉及以下几个方面：
1. 子组件设计：在子组件`checkBoxCard.vue`中，我们设计了一个选项卡式多选组件。它接收两个`props`：`name`（选项名称）和`checkIndex`（选项索引）。组件内部包含一个`data`属性`check`用于控制选中状态，以及`radio`和`radioName`用于处理多选时的逻辑。`methods`中定义了`checked`方法来控制选中状态的切换，以及`updateData`方法用于更新父组件的数据。`updateData`方法通过`$emit`向父组件派发一个自定义事件`updateSurveyData`，传递当前选项是否被选中（`radioName`）和索引（`checkIndex`）。
2. 父组件逻辑：父组件`checkBox.vue`中，使用`<CheckBoxCard>`自定义组件来迭代渲染`list`数组中的每一个选项。通过`v-for`循环为每个子组件绑定其对应的`name`和`checkIndex`。父组件监听子组件派发的`updateSurveyData`事件，通过`updateSurveyData`方法处理事件，并更新一个`checkList`数组，该数组记录了用户选择的选项。此外，父组件还通过`console.log`打印出所有非空选项。
3. 通信机制：Vue组件间的通信主要通过`props`和自定义事件来实现。在本例中，子组件通过`props`接收来自父组件的`name`和`checkIndex`，然后在用户交互时，子组件向父组件派发事件来更新父组件的数据。
4. 样式设计：子组件的样式使用`scss`编写，并用`scoped`属性限制样式仅在该组件内生效。`checkBoxCard`类定义了选项卡片的基本样式，包括内边距、边框、背景色等。`boxCheck`类定义了当选项被选中时的样式变化，比如文字颜色和背景色。
5. 示例代码解读：文中提供了`checkBoxCard.vue`和`checkBox.vue`两个组件的具体实现代码，通过这些代码，开发者可以了解如何实现一个自定义的多选组件，以及如何在父组件中使用它来收集用户的多选项数据。
通过上述知识点，我们可以了解到在Vue中如何设计和实现一个自定义的多选组件。需要注意的是，由于文档提供的代码片段中存在一些OCR识别错误和遗漏，需要开发者根据实际情况进行调整和完善。例如，可能需要修复模板中的属性绑定、JavaScript方法中的语法错误，以及CSS类名中的拼写错误等。在实践过程中，开发者应当确保代码的准确性并进行充分的测试，以保证组件的正常工作和用户的良好体验。
