当前位置：首页 > VUE

vue手动实现sync

2026-03-28 14:48:46VUE

在Vue中，.sync修饰符用于实现父子组件之间的双向数据绑定。虽然Vue 2.x中提供了.sync修饰符，但在Vue 3.x中已移除，可以通过v-model或自定义事件实现类似功能。以下是手动实现.sync功能的方法：

父组件实现

在父组件中，通过v-bind传递一个属性，并通过v-on监听子组件的更新事件。

vue手动实现sync

<template>
  <child-component :value="parentValue" @update:value="parentValue = $event" />
</template>

<script>
export default {
  data() {
    return {
      parentValue: '初始值'
    };
  }
};
</script>

子组件实现

在子组件中，通过props接收父组件传递的值，并在需要更新时触发update:value事件。

vue手动实现sync

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

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

使用计算属性优化

如果需要在子组件内部修改值而不直接触发事件，可以使用计算属性结合get和set。

<template>
  <input v-model="internalValue" />
</template>

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

Vue 3.x的替代方案

在Vue 3.x中，可以使用v-model的多个绑定或自定义事件实现类似功能。

<!-- 父组件 -->
<template>
  <child-component v-model:value="parentValue" />
</template>

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

<script>
export default {
  props: ['value'],
  emits: ['update:value']
};
</script>