当前位置：首页 > JavaScript

怎么用vue.js实现双向绑定

2026-01-30 20:52:11JavaScript

使用 `v-model` 实现双向绑定

Vue.js 提供了 v-model 指令，用于在表单元素（如 <input>、<select>、<textarea>）和组件上实现双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素的值。

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

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

自定义组件的双向绑定

在自定义组件中，可以通过 model 选项和 $emit 事件实现双向绑定。组件内部需要触发 input 事件来更新父组件的数据。

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    'custom-input': {
      props: ['value'],
      template: `
        <input
          :value="value"
          @input="$emit('input', $event.target.value)"
        >
      `
    }
  }
}
</script>

使用 `.sync` 修饰符实现双向绑定

Vue.js 提供了 .sync 修饰符，用于在父子组件之间实现双向绑定。父组件通过 v-bind 传递数据，子组件通过 $emit 触发 update:propName 事件来更新数据。

<template>
  <div>
    <custom-input :value.sync="message"></custom-input>
    <p>使用 .sync 的内容是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    'custom-input': {
      props: ['value'],
      template: `
        <input
          :value="value"
          @input="$emit('update:value', $event.target.value)"
        >
      `
    }
  }
}
</script>

手动实现双向绑定

可以通过监听 input 事件并手动更新数据来实现双向绑定。这种方法适用于需要更复杂逻辑的场景。

<template>
  <div>
    <input :value="message" @input="message = $event.target.value">
    <p>手动绑定的内容是：{{ message }}</p>
  </div>
</template>

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

注意事项

v-model 默认绑定的是 value 属性和 input 事件，但在复选框和单选按钮中会绑定 checked 属性和 change 事件。
在自定义组件中，可以通过 model 选项修改 v-model 的默认行为和事件名称。
使用 .sync 修饰符时，子组件需要触发 update:propName 事件来更新父组件的数据。