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

在使用useVModel之前，实现双向数据绑定

父组件传一个变量值，用v-model去传，v-model="isChecked"默认传的是modelValue，如果想要改变传的变量名，可以用在v-model后面加:变量名—v-model:变量名="isChecked"
在子组件可以使用props来接收父组件传过来的值，且默认定义为modelValue（如果父组件定义了变量名，这里要用父组件定义的变量名接收变量），然后在watch来侦听数据，将接收过来的值 props.变量名 赋给子组件定义的变量，当这个变量发生改变的时候，emit('update:变量名', newVal)

示例：多选框

//父组件：定义一个响应式数据 isChecked ，给一个默认值，传给子组件
 <XtxCheckbox v-model:checkedVal="isChecked">仅显示有货商品</XtxCheckbox>{{ isChecked }}
setup () {
  const isChecked = ref(true)
  return { isChecked }
}

//子组件--这里定义一个名为checked的响应式数据接收父组件传过来的值，在changeChecked方法中去修改checked的值，并且将新的值传递给父组件。
import { ref, watch } from 'vue'
export default {
  name: 'XtxCheckbox',
  props: {
    checkedVal: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    // 组合API :modelValue @update:modelValue
    const checked = ref(false)
    const changeChecked = () => {
      // 修改值
      checked.value = !checked.value
      // 传值
      emit('update:checkedVal', checked.value)
    }
    // 监听接收值
    watch(() => props.checkedVal, (newVal) => {
      checked.value = newVal
    }, { immediate: true })
    return { checked, changeChecked }
  }
}

useVModel

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

1. 使用props接收modelValue
2. 使用useVModel来包装props中的modelValue属性数据
3. 再使用checked.value就是使用父组件数据
4. 再使用checked.value = ‘数据’ 赋值，自动触发emit(‘update:modelvalue’, ‘数据’)

import { useVModel } from '@vueuse/core'
export default {
  name: 'XtxCheckbox',
  props: {
    checkedVal: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    //  useVModel用法
    const checked = useVModel(props, 'checkedVal', emit)
    const changeChecked = () => {
      checked.value = !checked.value
    }
    return { checked, changeChecked }
  }
}