vue如何实现双向变电

Vue 双向绑定实现方法

Vue 中实现双向绑定的核心是通过 v-model 指令，它结合了 v-bind 和 v-on 的功能，简化了表单元素与数据的同步操作。

基础用法

在表单元素上直接使用 v-model，绑定到组件的 data 属性：

<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>

对应的 JavaScript 部分：

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

修饰符应用

Vue 为 v-model 提供了多个修饰符来处理不同场景的需求：

• .lazy：将输入事件转为变更事件
• .number：自动将输入转为数字类型
• .trim：自动去除首尾空白字符

示例：

<input v-model.lazy="msg">
<input v-model.number="age" type="number">
<input v-model.trim="text">

组件自定义实现

在自定义组件中实现双向绑定需要显式定义 model 选项：

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

使用方式与原生元素一致：

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

多属性绑定

Vue 2.3+ 支持使用 v-bind.sync 实现多个属性的双向绑定：

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

父组件中使用：

<text-document v-bind:title.sync="doc.title"></text-document>

新版组合式 API

在 Vue 3 的组合式 API 中，可以使用 ref 或 reactive 创建响应式数据：

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('')
    return { message }
  }
}

模板中使用方式与选项式 API 一致：

<input v-model="message">