使用useVModel实现双向数据绑定v-model指令

 利用useVModel实现双向数据绑定

在使用useVModel之前，实现双向数据绑定，在子组件可以使用props来接收父组件传过来的值，且默认定义为modelValue，然后在watch来侦听数据，将接收过来的值props.modelValue赋给checked。

这里定义一个名为checked的响应式数据，在changeChecked方法中去修改checked的值，并且通知父组件值的变化，以及将新的值传递过去。

父组件里定义一个响应式数据 xxx ，给一个默认值，再在模板处使用v-model="xxx"来把值传给子组件，即可。

props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  }, 
setup (props, { emit }) {
    const checked = ref(false)
    const changeChecked = () => {
      checked.value = !checked.value
      emit('update:modelValue', checked.value)
    }
    watch(() => props.modelValue, () => {
      checked.value = props.modelValue
    }, { immediate: true })
    return { checked, changeChecked }
  }

另一种方法就是使用useVModel，还是需要使用props接收modelValue，还是将数据返回给checked，但此时的checked不需要另外定义为ref数据，因为useVModel返回的数据就是响应式数据。useVModel（）里的modelValue可以更改，只需要保持一致就可以，并且在父组件的v-model里这样写 -> v-model: 你更改的名字。

在执行到checked.value = !checked.value时，会触发emit事件去通知父组件数据改变了。

import { useVModel } from '@vueuse/core'

// 数据双向绑定 v-model语法糖 ---> :modelValue  +  @update:modelValue
export default {
  name: 'Checkbox',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    const checked = useVModel(props, 'modelValue', emit)
    const changeChecked = () => {
      checked.value = !checked.value
    }

    return { checked, changeChecked }
  }
}