<!-- 使用 v-model -->
<input v-model="message" />
<!-- 等價(jià)于 -->
<input
  :value="message"
  @input="message = $event.target.value"
/>

<!-- 父組件使用 -->
<MyComponent v-model="parentData" />
<!-- 子組件內(nèi)部 -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
// 當(dāng)需要更新時(shí)
emit('update:modelValue', newValue)
</script>
<!-- 實(shí)際等價(jià)于 -->
<MyComponent
  :modelValue="parentData"
  @update:modelValue="newValue => parentData = newValue"
/>

<!-- 子組件 -->
<script setup>
const props = defineProps(['value'])
// ? 錯(cuò)誤：不能直接修改 props
function handleChange() {
  props.value = newValue // 這會報(bào)錯(cuò)！
}
// ? 正確：通過 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" />

<!-- ? 錯(cuò)誤示例 -->
<script setup>
// RichTextEditor.vue
const props = defineProps(['modelValue'])
</script>
<template>
  <Editor v-model="modelValue" />
  <!-- 錯(cuò)誤！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"
/>

<!-- 只在失去焦點(diǎn)時(shí)更新，而不是每次輸入都更新 -->
<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)
})
// 外部變化時(shí)同步
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"
/>

// ? 錯(cuò)誤
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>