useVModel工具函数

目的：实现一个自定义复选框组件。

大致步骤：

• 实现组件本身的选中与不选中效果

• 实现组件的v-model指令

• 改造成 @vueuse/core 的函数写法

• ）实现双向绑定

  • vue3.0中v-model会拆解成 属性 modelValue 和 事件 update:modelValue

不使用useVModel的写法:

<template>
  <div class="xtx-checkbox" @click='toggleSelect()'>
    <i v-if="checked" class="iconfont icon-checked"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span>
      <slot />
    </span>
  </div>
</template>
<script>
import { toRef } from 'vue'

export default {
  name: 'XtxCheckbox',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    // 父组件将原始的状态值传递给子组件并且保证响应式能力
    const checked = toRef(props, 'modelValue')
    const toggleSelect = () => {
      //  = !
      // 修改父组件中的modelValue的值
      emit('update:modelValue', !checked.value)
    }
    return { checked, toggleSelect }
  }
}
</script>

总结：支持v-model指令，相当于属性绑定 :modelValue 和 触发事件 update:modelValue

使用useVmodel

• 补充 @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 { toRef } from 'vue'
import { useVModel } from '@vueuse/core'

export default {
  name: 'XtxCheckbox',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    // 获取父组件传递过来的modelValue的值
    const checked = useVModel(props, 'modelValue', emit)
    // const toggleSelect = () => {
    //   // 这个操作实际上修改的是父组件的值
    //    = !
    // }
    return { checked }
  }
  // setup (props, { emit }) {
  //   // 父组件将原始的状态值传递给子组件并且保证响应式能力
  //   const checked = toRef(props, 'modelValue')
  //   const toggleSelect = () => {
  //     //  = !
  //     // 修改父组件中的modelValue的值
  //     emit('update:modelValue', !)
  //   }
  //   return { checked, toggleSelect }
  // }
}
</script>

总结： useVModel 工具函数可实现双向绑定，简化手工操作。