当前位置：首页 > VUE

vue双向数据怎么实现

2026-02-22 05:27:10VUE

Vue 双向数据绑定的实现

Vue 的双向数据绑定主要通过 v-model 指令实现，它结合了数据绑定和事件监听，使得表单输入和应用状态之间能够自动同步。

使用 `v-model` 指令

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

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

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

自定义组件的双向绑定

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

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

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

使用 `.sync` 修饰符

对于需要双向绑定的 prop，可以使用 .sync 修饰符简化父子组件间的通信。

<template>
  <child-component :title.sync="pageTitle"></child-component>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: '初始标题'
    }
  },
  components: {
    'child-component': {
      props: ['title'],
      template: `
        <input 
          :value="title" 
          @input="$emit('update:title', $event.target.value)"
        >
      `
    }
  }
}
</script>

手动实现双向绑定

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

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

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

使用计算属性

对于需要处理复杂逻辑的双向绑定，可以结合计算属性的 get 和 set 方法。

<template>
  <input v-model="fullName">
  <p>全名是: {{ fullName }}</p>
</template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`
      },
      set(value) {
        const names = value.split(' ')
        this.firstName = names[0]
        this.lastName = names[1] || ''
      }
    }
  }
}
</script>