当前位置：首页 > VUE

vue中实现双向绑定

2026-02-22 00:00:37VUE

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 事件实现双向绑定。

vue中实现双向绑定

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

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

使用 `.sync` 修饰符

Vue 2.x 中可以使用 .sync 修饰符实现父子组件的双向绑定。子组件通过 $emit('update:propName', newValue) 更新父组件的数据。

<template>
  <ChildComponent :title.sync="pageTitle" />
</template>

<script>
export default {
  data() {
    return {
      pageTitle: '默认标题'
    }
  }
}
</script>

子组件中：

vue中实现双向绑定

this.$emit('update:title', newTitle)

Vue 3 中的 `v-model` 变化

Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定，并移除了 .sync 修饰符。

<template>
  <CustomComponent v-model:title="pageTitle" v-model:content="pageContent" />
</template>

<script>
export default {
  data() {
    return {
      pageTitle: '标题',
      pageContent: '内容'
    }
  }
}
</script>

子组件中通过 update:propName 事件更新：

this.$emit('update:title', newTitle)
this.$emit('update:content', newContent)

手动实现双向绑定

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

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

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