1.基本用法

子组件 child.vue

<script setup>
import { ref } from 'vue'

let props = defineProps({
    modelValue:{
        type:Number,
        default:0
    }
})

let emit = defineEmits("update:modelValue")

let plusClick = ()=>{
    emit("update:modelValue", props.modelValue + 1)
}

let mineClick = ()=>{
    emit("update:modelValue", props.modelValue - 1)

}


</script>

<template>

  <div>{{ props.modelValue }}</div>
  <button @click="plusClick">+</button>
  <button @click="mineClick">-</button>
  
</template>

<style scoped>



</style>

父组件

<script setup>
import { ref } from 'vue'
import Child from './Child.vue';

let total = ref(0)

</script>

<template>

  <Child v-model="total"></Child>
  <div>total={{ total }}</div>
  
</template>

<style scoped>

</style>

v-model是个语法糖，上面案例中，本质上是：

<Child :modelValue="total" @update:modelValue="newValue => total=newValue"></Child>

多个v-model

子组件child.vue

<script setup>
import { ref } from 'vue'

let props = defineProps({
    age:{
        type:Number,
        default:0
    },
    count:{
        type:Number,
        default:0
    }
})

let emit = defineEmits(["update:age", "update:count"])

let plusClick = ()=>{
    emit("update:age", props.age + 1)
}

let mineClick = ()=>{
    emit("update:age", props.age - 1)

}

let countClick = ()=>{
    emit("update:count", props.count + 1)

}


</script>

<template>

    <div class="contain1">
        <button @click="mineClick">-</button>
        <div>年龄：{{ props.age }}</div>  
        <button @click="plusClick">+</button>
    </div>

    <div class="contain1">
        <div>数量：{{ props.count }}</div>  
        <button @click="countClick">+</button>
    </div>


  
</template>

<style scoped>

.contain1{
    display: flex;
    flex-direction: row;
}

</style>

父组件

<script setup>
import { ref } from 'vue'
import Child from './Child.vue';

let myAge = ref(0)
let count = ref(0)

</script>

<template>

  <Child v-model:age="myAge" v-model:count="count"></Child>
  <div>myAge={{ myAge }}, count={{ count }}</div>


  
</template>

<style scoped>

</style>

这个案例中，v-model本质上是：

<Child :age='myAge' @update:age="newValue => myAge=newValue" 
       :count='count' @update:count="newValue => count=newValue"
></Child>

input上的v-model

<input v-model="text" />

这相当于

<input :value="text" @input="text = $event.target.value" />

其他类型的表单元素的v-model也是类似的语法糖，只是绑定的参数名和事件名不一样