vue3 实现 vue2中的 sync

在Vue3中，虽然官方推荐使用Composition API或Reactivity系统来进行更精细的数据管理，但是如果你仍然想实现类似Vue2中`v-model.sync`的功能，你可以利用自定义事件(`@emit`)配合ref来模拟。

首先，在子组件中，你可以创建一个ref来存储数据并监听其变化，然后通过`@emit`触发父组件的更新：

<template>
  <input :value="childValueRef.value" @input="updateParentValue">
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const childValueRef = ref('');
    
    function updateParentValue(event) {
      this.$emit('input', event.target.value);
    }

    return { childValueRef, updateParentValue };
  },
};
</script>

在父组件中，你可以接收这个自定义事件并更新相应的数据：

<template>
  <div>
    {{ parentProp }}
    <ChildComponent @input="handleInputFromChild" />
  </div>
</template>

<script lang="ts">
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const parentProp = ref('');

    function handleInputFromChild(value) {
      parentProp.value = value;
    }

    return { parentProp, handleInputFromChild };
  },
};
</script>