vue如何实现双向变电

在Vue中实现双向数据绑定通常使用v-model指令或结合计算属性与自定义事件。以下是几种常见方法：

使用v-model指令

v-model是Vue提供的语法糖，默认绑定表单元素的value属性并监听input事件：

<input v-model="message" />
<p>{{ message }}</p>

对应的JavaScript逻辑：

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

自定义组件双向绑定

对于自定义组件，需显式定义model选项并触发更新事件：

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

组件实现：

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

计算属性结合事件

当需要处理复杂逻辑时，可通过计算属性的get/set实现：

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName
    },
    set(value) {
      const names = value.split(' ')
      this.firstName = names[0]
      this.lastName = names[1] || ''
    }
  }
}

.sync修饰符（Vue 2.x）

对于多个props的双向绑定，可使用.sync：

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

子组件通过触发update:title事件：

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

Vue 3的v-model改进

Vue 3支持多个v-model绑定并移除.sync：

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

子组件通过定义对应props和事件：

props: {
  firstName: String,
  lastName: String
},
emits: ['update:firstName', 'update:lastName']

每种方法适用于不同场景，v-model适合表单元素，自定义组件推荐使用显式事件触发，复杂逻辑建议使用计算属性。