iVX进阶教程：15.小模块实战：单选多选小模块

1.单选实现

公共数据

点击单选的选项会选中当前项并取消选中其他选项，因此我们需要使用一个变量来保存选中项，并在每次点击选项都将该选项的值赋给该变量，只有每个选项对应的当前数据与变量相同时才显示为选中状态。

在小模块中，我们添加了两个变量至公共数据，其中选项列表为小模块内用于循环生成每个选项的数据源，选中项则为上述用于保存当前选中项的变量。

自定义事件

在每次点击小模块内的选项后，我们需要监听该事件并传递至小模块外部，以便其他组件可以在发生选中某一项时执行相应的动作。因而我们需要为小模块添加一个自定义事件--选中选项。

同时，为了让小模块外部能在该事件下直接获取到选中项，我们为该自定义事件附带上了一个事件参数直接传递选中项。 事件触发

为了在选中时改变UI的显示，且外部组件可以监听到小模块内部的点击选中事件，我们还需要在点击选中时为选中项进行赋值并手动触发刚刚创建的自定义事件。

2.多选实现

公共数据

多选的选中项可能为多个，点击多选的选项会改变选择项的选中状态，在每次点击选项都判断当前项是否已经被选中，若已经被选中则将其从选中项移除，反之则添加进入选中项。此时每个选项对应的当前数据属于选中项即为选中状态。

在多选小模块中，我们也添加了两个变量至公共数据，其中选项列表

为小模块内用于循环生成每个选项的数据源，选中项则为上述用于保存当前选中项的变量，但由于选中项存在多个值，此处使用一维数组。

自定义事件

自定义事件的添加和单选小模块完全一致。 事件触发

多选的事件触发需要对选中的选项进行判断后再处理，最后手动触发自定义事件并将处理好的选中的选项这个一维数组作为事件参数传递出去。