当前位置：首页 > VUE

vue怎样实现双向绑定

2026-01-22 16:55:26VUE

Vue 双向绑定的实现方式

Vue 主要通过 v-model 指令实现双向绑定，该指令在表单元素或自定义组件上创建双向数据绑定。以下是具体实现方法：

表单元素的双向绑定

在表单输入元素（如 input、textarea、select）上使用 v-model，Vue 会自动处理值的更新和同步：

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

data() {
  return {
    message: ''
  }
}

v-model 会根据输入类型自动选择正确的方式更新数据：

文本类型的 input 和 textarea 使用 value 属性和 input 事件
checkbox 和 radio 使用 checked 属性和 change 事件
select 字段使用 value 作为 prop 和 change 作为事件

自定义组件的双向绑定

在自定义组件中实现双向绑定需要显式定义 model 选项并触发更新事件：

<custom-input v-model="searchText"></custom-input>

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

或者使用 Vue 2.3+ 的 model 选项修改默认的 prop 和事件：

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
    >
  `
})

修饰符的使用

v-model 提供了一些有用的修饰符：

.lazy：将 input 事件转为 change 事件后同步
.number：自动将输入值转为数字类型
.trim：自动去除输入内容的首尾空格

<input v-model.lazy="msg">
<input v-model.number="age" type="number">
<input v-model.trim="message">

Vue 3 的变化

在 Vue 3 中，双向绑定的实现有以下调整：

vue怎样实现双向绑定

自定义组件的 v-model 默认使用 modelValue 作为 prop 和 update:modelValue 作为事件
支持多个 v-model 绑定
移除 .sync 修饰符，用 v-model 参数替代

<custom-component v-model:title="pageTitle"></custom-component>

app.component('custom-component', {
  props: ['title'],
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)"
    >
  `
})

通过以上方式，Vue 提供了灵活的双向数据绑定机制，既能简化表单处理，也能在组件间实现数据同步。