关于VUE3的v-model

原生表单元素的v-model写法不变，主要是针对自定义组件的v-model改动还是很大的。取消了之前的.sync + update:XX 父子互相更新数据的模式，因为新版本的v-model已经能够完全覆盖之前的sync模式了，甚至可以在同一个自定义组件上定义多个v-model。这个模式存在的意义我觉得本质上还是为了保证数据流的清晰，就算你不这么写的话，如果父传子的props是一个对象，那么子去直接修改对象的话，父的数据也会改变，只不过vue会给出警告，然后可能也引发一些奇怪的bug而已。

<customercomponent v-model='test v-model:title='chifan'></customercomponent>

上面这种不传特殊参数的v-model（区别于这种v-model:xxx)，本质上是下面这样：

<customercomponent v-model:modelValue="test" v-model:title='chifan'><customercomponent>

customercomponent组件内部：

<template>
{{modelValue}}
{{_t}}
{{title}}
<button @click="jj">emitEvent</button>
<button @click="ff">更新title</button>
</template>
<script>
import {toRefs} from 'vue'
export default {
    props:{
        modelValue:Number, // 注意此处一定要接一下，如果传了特殊参数，就是特殊参数比如上面的title，然后update的时候事件名也是title
        title:String
    },
    setup(props,con){
        let {modelValue:_t} = toRefs(props)
        const jj = ()=>{
          let x = _t.value; //这个地方重新赋个值，不要直接modelValue.value++ ,尽量不要直接在子组件中修改props的值。vue也会警告
          x++
          con.emit('update:modelValue',x)
    }
    const ff = () => {
      con.emit('update:title','更新了title哦')
    }
    return {jj,_t,ff}
    }
}
</script>

总之理解成语法糖就行，v-model 冒号后面跟的参数，即是传给子组件的props，也是子组件触发父组件更新的事件名称

vue3 v-model

关于VUE3的v-model