vue 使用hook 对 chekbox 做简单的逻辑抽离，一个核心多套模板

现在的组件库都会包含些相同的基础组件，功能大差不差，只是不同UI规范下的具体实现。这些基础组件基本能满足大部分的开发需求。 但世上无银弹，有时我们需要对组件做细微的调整可能是功能上的，可能是UI上的，例如 tab切换，需要自定义标签头，修改标签布局，显示或隐藏等，这些功能组件都是在大致的功能基础上做的定向扩展或修改。如果每次都重新编写一套逻辑就显得累赘，繁琐。

在vue3提供hook的逻辑复用方式后，我们能通过hook将公共逻辑抽离出来提高复用, 小的功能业务逻辑可以，基础组件交互逻辑当然也可以。 这里就遇到的一个菜单的单选，复选需求， 为了能以后快速开发类似的组件功能。尝试将逻辑封装成hook。 以hook提供的API 在实现不同的组件。

需求

开始需要明确我们需要的基础功能点，功能尽量基础才能保证通用性，后续的功能也能在基础功能上做扩展.

• 单选
• 多选
• 跨组件通信

单选，多选是基础能力, 跨组件是为了将实际的值控制与独立的 checkItem 分离，这样checkItem可以不受 html 层级限制

可以多种不同的checkItem切换或嵌套使用

checkContainer -> [ checkItemType1, checkItemType2 ] 

使用例子

实现多选组件

容器组件 chekcboxContainer

<script setup>
import { useCheckboxContainer } from '@/hooks/useCheckbox'
import { toRefs } from 'vue'
import { PROVIDE_KEY } from './common'


const props = defineProps({value: {type: Array,default: () => ([])}
})


const emit = defineEmits(['input', 'change'])
const { value } = toRefs(props)
// 绑定 v-model 等事件
function selectHandler (selected) {emit('input', selected)emit('change', selected)
}
// 调用钩子逻辑
useCheckboxContainer({setCb: selectHandler,provideKey: PROVIDE_KEY,valueRef: value
})


</script>
<template><div class="container"><slot></slot></div>
</template>
<style lang=&#