Vue中的v-model 和 :value 深度解析

<!-- 使用 v-model -->
<input v-model="message" />
<!-- 等价于 -->
<input
  :value="message"
  @input="message = $event.target.value"
/>

<!-- 父组件使用 -->
<MyComponent v-model="parentData" />
<!-- 子组件内部 -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
// 当需要更新时
emit('update:modelValue', newValue)
</script>
<!-- 实际等价于 -->
<MyComponent
  :modelValue="parentData"
  @update:modelValue="newValue => parentData = newValue"
/>

<!-- 子组件 -->
<script setup>
const props = defineProps(['value'])
// ❌ 错误：不能直接修改 props
function handleChange() {
  props.value = newValue // 这会报错！
}
// ✅ 正确：通过 emit 通知父组件更新
function handleChange() {
  emit('update:value', newValue)
}
</script>

<!-- ✅ 推荐：使用 v-model -->
<input v-model="username" />
<!-- ❌ 不推荐：虽然功能相同但代码冗余 -->
<input :value="username" @input="e => username = e.target.value" />

<!-- ✅ 推荐：使用 :value，明确表示只读 -->
<div>用户名：{{ username }}</div>
<!-- ✅ 如果需要绑定到非表单元素 -->
<CustomDisplay :value="username" />

<!-- ❌ 错误示例 -->
<script setup>
// RichTextEditor.vue
const props = defineProps(['modelValue'])
</script>
<template>
  <Editor v-model="modelValue" />
  <!-- 错误！props 不能直接用 v-model 修改 -->
</template>

<!-- ✅ 正确示例 -->
<script setup>
// RichTextEditor.vue
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <Editor
    :value="modelValue"
    @onChange="editor => emit('update:modelValue', editor.getHtml())"
  />
</template>

<input v-model="text" />
<select v-model="selected" />
<textarea v-model="content" />

<MyInput v-model="value" />
<MySelect v-model="selected" />

<Counter v-model="count" />

<UserDisplay :value="user" />
<PriceLabel :value="price" />

<!-- 富文本编辑器通常用 :value + 自定义事件 -->
<RichTextEditor
  :value="content"
  @change="handleContentChange"
/>

<!-- 只在失去焦点时更新，而不是每次输入都更新 -->
<SmartInput
  :value="searchText"
  @blur="handleSearch"
/>

<PhoneNumberInput
  :value="phone"
  @update:value="handlePhoneUpdate"
/>

<!-- BaseInput.vue -->
<script setup>
const props = defineProps({
  modelValue: [String, Number],
  type: {
    type: String,
    default: 'text'
  },
  placeholder: String
})
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <input
    :type="type"
    :placeholder="placeholder"
    :value="modelValue"
    @input="e => emit('update:modelValue', e.target.value)"
  />
</template>
<!-- 使用 -->
<BaseInput v-model="username" placeholder="请输入用户名" />

<!-- RichTextEditor.vue -->
<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue'])
const handleChange = (editor) => {
  const html = editor.getHtml()
  emit('update:modelValue', html)
}
</script>
<template>
  <div class="editor-container">
    <Editor
      :value="modelValue"
      @onChange="handleChange"
    />
  </div>
</template>

<!-- DebouncedInput.vue -->
<script setup>
import { ref, watch } from 'vue'
const props = defineProps(['modelValue', 'delay'])
const emit = defineEmits(['update:modelValue'])
const localValue = ref(props.modelValue)
let timer = null
watch(localValue, (newValue) => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    emit('update:modelValue', newValue)
  }, props.delay || 300)
})
// 外部变化时同步
watch(() => props.modelValue, (newValue) => {
  localValue.value = newValue
})
</script>
<template>
  <input
    :value="localValue"
    @input="e => localValue = e.target.value"
  />
</template>

<!-- 这完全可行 -->
<CustomInput
  :value="value"
  @update:value="value = $event"
/>

// ❌ 错误
props.value = newValue

// ✅ 正确
emit('update:value', newValue)

<script setup>
defineProps({
  title: String,
  modelValue: String
})
defineEmits(['update:modelValue', 'update:title'])
</script>
<!-- 使用 -->
<MyComponent v-model="value" v-model:title="pageTitle" />

<!-- ❌ 频繁更新 -->
<template v-for="field in fields" :key="field.name">
  <input v-model="formData[field.name]" />
</template>
<!-- ✅ 批量更新 -->
<script setup>
const formData = reactive({})
const updateField = (name, value) => {
  formData[name] = value
  // 可以在这里添加防抖或批量提交逻辑
}
</script>
<template>
  <template v-for="field in fields" :key="field.name">
    <input
      :value="formData[field.name]"
      @input="e => updateField(field.name, e.target.value)"
    />
  </template>
</template>