vue手动实现sync

在 Vue 中手动实现 .sync 修饰符

Vue 的 .sync 修饰符提供了一种双向绑定的简化方式，但在某些场景可能需要手动实现类似功能。以下是实现方法：

使用 v-bind 和 v-on 组合

父组件通过 v-bind 传递 prop，通过 v-on 监听子组件的更新事件：

<!-- 父组件 -->
<child-component 
  :value="parentValue" 
  @update:value="parentValue = $event"
/>

子组件通过 $emit 触发更新：

<!-- 子组件 -->
<template>
  <input 
    :value="value" 
    @input="$emit('update:value', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['value']
}
</script>

使用计算属性实现

子组件可以通过计算属性实现更灵活的控制：

<!-- 子组件 -->
<template>
  <input v-model="internalValue" />
</template>

<script>
export default {
  props: ['value'],
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('update:value', val)
      }
    }
  }
}
</script>

对象属性的双向绑定

对于对象属性，可以使用同样的模式：

<!-- 父组件 -->
<child-component 
  :user="user" 
  @update:user="user = $event"
/>

<!-- 子组件 -->
<input 
  :value="user.name" 
  @input="$emit('update:user', {...user, name: $event.target.value})"
>

注意事项

• 始终遵循单向数据流原则，避免直接修改 prop
• 事件名称必须遵循 update:propName 的格式
• 对于复杂数据结构，考虑使用深拷贝或不可变数据

这种方法提供了与 .sync 相同的功能，同时保持了代码的显式性和可控性。