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 相同的功能，同时保持了代码的显式性和可控性。
