vue实现双向

Vue 实现双向绑定的方法

Vue 主要通过 v-model 指令实现双向绑定，适用于表单元素或自定义组件。以下是几种常见实现方式：

表单元素的双向绑定

在表单元素（如 input、textarea、select）上直接使用 v-model，Vue 会自动处理值的同步。

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

自定义组件的双向绑定

自定义组件需通过 model 选项和 $emit 事件实现双向绑定。

1. 父组件使用 v-model：

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

2. 子组件通过 props 接收值并触发 input 事件：

   props: ['value'],
   template: `
   <input
    :value="value"
    @input="$emit('input', $event.target.value)"
   >
   `

使用 .sync 修饰符

Vue 支持通过 .sync 修饰符实现多个 props 的双向绑定。

父组件：

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

子组件触发更新：

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

计算属性的双向绑定

通过计算属性的 get 和 set 方法实现复杂逻辑的双向绑定。

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

注意事项

• 双向绑定可能引发数据流难以追踪的问题，建议在必要时使用。
• 自定义组件的 v-model 默认利用 value prop 和 input 事件，可通过 model 选项修改。
• Vue 3 中 v-model 默认使用 modelValue prop 和 update:modelValue 事件。