vue数据实现双向绑定

Vue 数据双向绑定的实现方式

Vue 通过数据劫持和发布-订阅模式实现双向绑定，核心是 v-model 指令和响应式系统。以下是具体实现方法：

使用 v-model 指令

v-model 是 Vue 提供的语法糖，用于在表单元素（如 input、select）上实现双向绑定。它会根据控件类型自动选取正确的方法更新数据。

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

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

自定义组件的双向绑定

对于自定义组件，可以通过 model 选项和 $emit 事件实现双向绑定。

<template>
  <CustomInput v-model="searchText" />
</template>

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

自定义组件内部实现：

<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'input'
  }
}
</script>

手动实现响应式绑定

如果不使用 v-model，可以通过 :value 绑定和 @input 事件手动实现双向绑定。

<template>
  <input 
    :value="message" 
    @input="message = $event.target.value"
  >
  <p>输入的内容是：{{ message }}</p>
</template>

使用 .sync 修饰符（Vue 2.x）

在 Vue 2.x 中，可以通过 .sync 修饰符实现父子组件的双向绑定。

父组件：

<ChildComponent :title.sync="pageTitle" />

子组件通过触发 update:title 事件更新：

this.$emit('update:title', newTitle)

Vue 3 的 v-model 变更

Vue 3 中 v-model 默认使用 modelValue 作为 prop，update:modelValue 作为事件。

父组件：

<CustomComponent v-model="title" />

子组件：

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

注意事项

• v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

  • text 和 textarea 元素使用 value property 和 input 事件；
  • checkbox 和 radio 使用 checked property 和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。

• 在 Vue 3 中，可以为一个组件定义多个 v-model 绑定，例如：

  <UserForm
    v-model:first-name="firstName"
    v-model:last-name="lastName"
  />