vue中useVModel()的使用方法(通俗易懂)

<template>
    <div>
        <uniInput v-model:flag="flag" @update:flag="tofather"></uniInput>
    </div>
</template>

<script setup>
import uniInput from './components-input/uni-input.vue'
import {ref} from 'vue'
const flag=ref(true)
const tofather=(data)=>{
    console.log('data',data)
}
</script>

<style scoped lang="less"></style>

<template>
    <div>
      <h1>{{ flag }}</h1>
      <button @click="changeflag">点击事件</button>
    </div>
</template>

<script setup lang="ts">
import {defineProps,defineEmits} from 'vue'
import {useVModel} from '@vueuse/core'
const emit=defineEmits([])
const props=defineProps({
  flag:{
    type:Boolean,
    default:false
  }
})

const flag=useVModel(props,'flag',emit)

const changeflag=()=>{
  flag.value=!flag.value
}
</script>

<style scoped lang="less"></style>

<uniInput v-model="flag"></uniInput>

const props=defineProps({
  modelValue:{
    type:Boolean,
    default:false
  }
})

const flag=useVModel(props,'modelValue',emit)

<uniInput v-model="flag" @update:model-value="tofather"></uniInput>

//我的代码
const checked = useVModel(props, "modelValue", emit);
    const changeChecked = () => {
      checked.value = !checked.value;
     //因为传过来的modelValue为true，这里我认为是可以取反赋值的
    //然而log输出的一直为false
      console.log(checked);    
      emit("change", checked.value);
    };  

//文档代码  
const checked = useVModel(props, 'modelValue', emit)
    const changeChecked = () => {
      const newVal = !checked.value
      checked.value = newVal
      emit('change', newVal)
    }

//修改后生效代码
const checked = useVModel(props, "modelValue", emit);
    const changeChecked = () => {
      checked.value = !checked.value;
      emit("change", !checked.value);
    };

文档的意思是

 const checked = useVModel(props, 'modelValue', emit)
    const changeChecked = () => {
      const newVal = !checked.value
      // 通知父组件，所以是可以直接修改值的
      checked.value = newVal
      // 让组件支持change事件
      emit('change', newVal)
    }

      // 单纯通知父组件，本组件的值在函数结束前并不会立即变化
      checked.value = newVal
      // 让组件支持change事件，这是为了让父组件能拿到子组件的值，还可以拿到自己的值作为参数传递
      emit('change', newVal)