当前位置：首页 > VUE

vue实现双向

2026-01-07 22:42:19VUE

Vue 实现双向绑定的方法

Vue 的双向绑定主要通过 v-model 指令实现，它结合了数据绑定和事件监听，适用于表单元素（如 input、select、textarea 等）。以下是几种常见的实现方式：

使用 `v-model` 指令

v-model 是 Vue 提供的语法糖，自动将表单元素的值与 Vue 实例的数据属性绑定。

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

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

自定义组件实现双向绑定

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

<template>
  <custom-input v-model="customMessage"></custom-input>
  <p>自定义组件的值: {{ customMessage }}</p>
</template>

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

使用 `.sync` 修饰符

Vue 2.x 中可以使用 .sync 修饰符实现父子组件的双向绑定。

<template>
  <custom-input :value.sync="syncMessage"></custom-input>
  <p>使用 .sync 的值: {{ syncMessage }}</p>
</template>

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

Vue 3 的 `v-model` 改进

Vue 3 中 v-model 支持多个绑定，且默认使用 modelValue 和 update:modelValue。

<template>
  <custom-input v-model="vue3Message"></custom-input>
  <p>Vue 3 的值: {{ vue3Message }}</p>
</template>

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