vue3.0实现复选框组件的封装

<!-- 组件基本样式 --><template>  <div class="xtx-checkbox" @click="changeChecked()">    <i v-if="checked" class="iconfont icon-checked"></i>    <i v-else class="iconfont icon-unchecked"></i>    <span v-if="$slots.default"><slot /></span>  </div></template><script>import { ref } from 'vue'export default {  name: 'XtxCheckbox',  setup () {    const checked = ref(false)    const changeChecked = () => {      checked.value = !checked.value    }    return { checked, changeChecked }  }}</script><style scoped lang="less">  // 样式可以酌情更改.xtx-checkbox {  display: inline-block;  margin-right: 2px;  .icon-checked {    color: @xtxColor;    ~ span {      color: @xtxColor;    }  }  i {    position: relative;    top: 1px;  }  span {    margin-left: 2px;  }}</style>// 注：如需全局使用，需注册为全局组件

<!-- 实现v-model指令 -->... 省略结构<script>import { toRef } from 'vue'export default {  name: 'XtxCheckbox',  props: {    modelValue: { // v-model默认绑定的值为modelValue      type: Boolean,      default: false    }  },  setup (props, { emit }) {    const checked = toRef(props, 'modelValue') // 定义checked存储接收到的boolean值    const changeChecked = () => {      emit('update:modelValue', !checked.value) // 给使用的父组件传值，实现复选框的勾选    }    return { checked, changeChecked }  }}</script>... 省略样式

<!-- 基本使用 --><!-- 自定义复选框测试 --><xtx-checkbox v-model="checked">自定义复选框</xtx-checkbox><script>import { ref } from 'vue'export default {  name: 'SubCategory',  setup () {    const checked = ref(true)    return { checked }  }}</script>

<!-- @vueuse/core的函数写法 --><template>  <div class="xtx-checkbox" @click='checked=!checked'>    <i v-if="checked" class="iconfont icon-checked"></i>    <i v-else class="iconfont icon-unchecked"></i>    <span>      <slot />    </span>  </div></template><script>import { useVModel } from '@vueuse/core' // 需要 npm i @vueuse/core 或 yarn add @vueuse/coreexport default {  name: 'XtxCheckbox',  props: {    modelValue: {      type: Boolean,      default: false    }  },  setup (props, { emit }) {    // 获取父组件传递过来的modelValue的值    const checked = useVModel(props, 'modelValue', emit)    return { checked }  }}</script>// 使用方法如上<xtx-checkbox v-model="checked">自定义复选框</xtx-checkbox><script>import { ref } from 'vue'export default {  name: 'SubCategory',  setup () {    const checked = ref(true)    return { checked }  }}</script>