<template>
  <input
     v-model="localMessage"
  />
</template>

<script>
export default {
  props: ['value'],

  computed: {
    // 使用计算属性，实现子组件内的内容更新会自动更新父组件
    localMessage: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)  
      }
    }
  }
}
</script>

这样父组件内部，可以有原本 <child :value="username" @input="username=$event" /> ，简化为 <child v-model="username" />

当然，有些人可能会使用 $refs ，通过父组件调用子组件内部公开的方法来完成数据的同步，比如：

<template>
  <div>
    <child ref="childComponent" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.methodName();
    }
  }
}
</script>

但是我认为， $ref 作为获取子组件DOM元素、访问子组件实例的工具钩子；如果是封装组件，特别是表单类别、渲染模块，那么使用 v-model 更优雅，不用考虑还需要 $refs 二次调用的情况。

Vue3.0~Vue3.3

但是，Vue3版本开始有所不同。在 [Vue3.0, Vue3.3) 版本之间，为了更好地支持组合式 API 和一致性，Vue 3引入了 modelValue 和 @update 的语法糖，以取代先前的 value 和 @input :

1	`<input v-model="model"/>`

在 [Vue3.0, Vue3.3) 之间，等于：

1
2
3

<input
  v-model="modelValue"
  @update:modelValue="updateModelValue"/>

具体的使用样例：

1
2
3

// Parent.vue

<Child v-model="name" label="Name" />

子组件实现：

// Child.vue

<template>
  <input
    class="input"
    type="text"
    :placeholder="props.label"
    :value="props.modelValue"
    v-on:input="updateValue($event.target.value)"
  />
</template>

<script setup>

const props = defineProps({
  modelValue: String
})

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

const updateValue = (value) => {
  emit('update:modelValue', value)
}
</script>

但是，在Vue3.3版本开始(稳定版本应该是Vue3.4)。有有所不同。

Vue3.4

在 Vue版本<3.3 的情况下，就如上文一样， v-model 是 modelValue 和 @update 的语法糖；甚至在Vue2.x时代，是 value 和 @input 的语法糖。

你当然可以在Vue3.4时候，继续使用 modelValue 和 @update 的语法糖，但是Vue3.4开始，引入一种更优雅的方式： defineModel ，参考自: https://blog.vuejs.org/posts/vue-3-4 :

Today we're excited to announce the release of Vue 3.4 "🏀 Slam Dunk"!

This release includes some substantial internal improvements - most notably a rewritten template parser that is 2x faster, and a refactored reactivity system that makes effect triggering more accurate and efficient. It also packs a number of quality-of-life API improvements, including the stabilization of defineModel and a new same-name shorthand when binding props.

今天，我们很高兴地宣布 Vue 3.4 “🏀灌篮高手”的发布！
此版本包括一些实质性的内部改进 - 最引人注目的是重写的模板解析器，速度提高了 2 倍，以及重构的反应系统，使效果触发更加准确和高效。它还包含许多生活质量 API 改进，包括绑定 prop 时的 defineModel 稳定性和新的同名速记。

具体在 setup()内使用，非常简单:

// 声明 "modelValue" prop，由父组件通过 v-model 使用
const model = defineModel()
// 或者：声明带选项的 "modelValue" prop
const model = defineModel({ type: String })

// 在被修改时，触发 "update:modelValue" 事件
model.value = "hello"

// 声明 "count" prop，由父组件通过 v-model:count 使用
const count = defineModel("count")
// 或者：声明带选项的 "count" prop
const count = defineModel("count", { type: Number, default: 0 })

const inc = () => {
  // 在被修改时，触发 "update:count" 事件
  count.value++
}

也就是，使用 defineModel ，你就不需要强制在子组件内定义 modelValue 和 @update 了。这个新的语法糖，进一步简化了代码。

如果你想获取 v-model 的描述，比如定义首字母大写：

1	`<Child v-model.capitalize="username"/>`

那么用 defineModel 的形式，可以这样：

// Child.vue
<script setup>
const [modelValue, modelModifiers] = defineModel()

if (modelModifiers.capitalize) {
  modelValue = modelValue.charAt(0).toUpperCase() + modelValue.slice(1);
}
</script>

可以看到，Vue3.4的新特性，还是非常好用的。

END

在本文中，我们深入探讨了在Vue框架中，父子组件之间数据通信的核心机制，并特别关注了 v-model 指令的功能与在Vue版本迭代中的变化。通过对 props 和 emit 机制的解析，我们了解了如何在组件间单向传递数据以及如何通知父组件子组件的数据变化。

随着Vue3起的变更， v-model 的包装参数的名称更加合理，特别是在Vue3.4及以后的版本中引入的 defineModel 配置方式更加简洁和优雅。

希望文章对你有用嗷。