vue.3.0关于v-model的语法糖

当父组件向子组件传递单个属性值时，可以使用下列语法简写
在父组件中

// 把父组件中的money属性传递给son子组件
<Son v-model="money" />

在子组件中

export default{
  name:'son',
  props:{
    modelValue:{
      type:Number,
      required:true
    }
  },
  setup(props,{emit}){
    function fn10(){
      let newMoney = props.modelValue - 10
      emit('update:modelValue',newMoney)
    }
    return {
      fn10
    }
  }
}

那么在父组件中简写之前的代码应该是这个样子的

<Son :modelValue='money' v-on:update:modelValue='money=$event' />

如果你要向子组件多个属性，其实不建议大家传递一个对象过去，传递多个属性，也有语法糖
在父组件中传递一个money、一个age

// v-model只能用一次
// v-model:age="age" 可以使用多次
<Son v-model="money" v-model:age="age"></Son>

在子组件中

export default{
  name:'son',
  props:{
    modelValue:{
      type:Number,
      required:true
    },
    age:{
      type:Number,
      required:true
    }
  },
  setup(props,{emit}){
    function fn10(){
      let newMoney = props.modelValue - 10
      emit('update:modelValue',newMoney)
    }
    function add10(){
      let newNumber = props.age + 10
      emit('update:age',newNumber)
    }
    return {
      fn10,
      add10
    }
  }
}