vue----v-model

v-model="state" 本质是 Vue 提供的一个语法糖（syntactic sugar），用于简化「父子组件之间的双向绑定」。

一、基础等价转换

<Child v-model="state" />

等价于：

<Child 
  :modelValue="state" 
  @update:modelValue="val => state = val" 
/>

二、子组件实现示例

1. 子组件（Child.vue）

<template>
  <input 
    :value="modelValue" 
    @input="handleInput"
  />
</template>

<script setup>
const props = defineProps({
  modelValue: String
})

const emit = defineEmits(['update:modelValue'])

const handleInput = (e) => {
  emit('update:modelValue', e.target.value)
}
</script>

2. 父组件

<template>
  <Child v-model="state" />
  <p>{{ state }}</p>
</template>

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

const state = ref('hello')
</script>