vue实现双休绑定

Vue 实现双向绑定

Vue.js 通过 v-model 指令实现双向绑定，主要用于表单输入元素（如 <input>、<textarea>、<select>）与组件之间的数据同步。以下是具体实现方式：

表单元素的双向绑定

在表单元素上使用 v-model，Vue 会自动处理值的绑定和更新：

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

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

v-model 会根据输入元素的类型自动选择正确的方式更新数据（如 text 和 textarea 使用 value 属性，checkbox 和 radio 使用 checked 属性）。

自定义组件的双向绑定

在自定义组件中实现双向绑定，需使用 model 选项和 $emit 事件：

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

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

通过 model 选项指定绑定的属性和事件，子组件内部通过 $emit 触发更新。

修饰符

v-model 支持修饰符来调整行为：

• .lazy：将 input 事件改为 change 事件（延迟同步）

  <input v-model.lazy="message">

• .number：自动将输入转为数字类型

  <input v-model.number="age" type="number">

• .trim：自动去除首尾空格

  <input v-model.trim="message">

原理

Vue 的双向绑定本质是语法糖，结合了 :value 属性绑定和 @input 事件监听：

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

v-model 在组件中同样基于这一机制，通过 prop 和事件实现父子组件数据同步。