Vue中如何实现双向数据绑定？

在Vue中，双向数据绑定指的是视图（View）与数据（Model）之间的自动同步：数据变化时视图更新，视图输入变化时数据也相应更新。虽然Vue的核心是单向数据流，但它通过语法糖和特定指令，提供了便捷的双向绑定体验，其底层依然是响应式系统和事件监听的结合。

v-model指令：表单元素的语法糖

v-model是实现双向绑定最直接的方式。它本质上是一个语法糖，负责监听用户的输入事件（如input、change）并更新数据，同时将数据值回显到表单元素上。

<template>
  <input v-model="message" />
  <p>您输入的是：{{ message }}</p>
</template>

<script>
export default {
  data() {
    return { message: 'Hello' }
  }
}
</script>

对于不同的表单元素，v-model会自动适配不同的事件和属性。例如在<input type="text">上，它相当于：

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

在复选框（<input type="checkbox">）上，它会绑定到布尔值或数组；在<select>上，它绑定到选中的值。

自定义组件的v-model

在自定义组件上，v-model默认利用名为modelValue的prop和名为update:modelValue的自定义事件来实现。

<!-- 父组件 -->
<CustomInput v-model="text" />

<!-- CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

在Vue 3中，你还可以为组件指定多个v-model绑定（如v-model:title、v-model:content），这为复杂组件的双向通信提供了更大的灵活性。

.sync修饰符与自定义事件

在Vue 2中，.sync修饰符是另一种实现“双向绑定”的模式，它通过特定格式的事件（update:propName）来更新父组件数据。在Vue 3中，v-model取代了.sync的功能。

<!-- Vue 2: 使用 .sync -->
<ChildComponent :title.sync="pageTitle" />
<!-- 在子组件内触发：this.$emit('update:title', newTitle) -->

因此，Vue的双向绑定并非魔法。它建立在单向数据流的基础上：父组件通过prop向下传递数据，子组件通过事件向上通知变化。v-model只是将这个模式标准化和简化了。理解其原理，能让你在需要更精细控制时，轻松地拆解为:value和@input，或在自定义组件中实现符合自身逻辑的双向通信。