用 组合式 vue3 h 函数 写一个input 组件同时实现双向同步功能

在Vue3中，可以使用组合式API来创建组件。下面是一个使用组合式API的input组件，并且实现了双向同步功能：

<template>
  <input :value="value" @input="updateValue($event.target.value)">
</template>

<script>
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const value = ref(props.modelValue);

    watch(() => props.modelValue, (newValue) => {
      value.value = newValue;
    });

    function updateValue(newValue) {
      value.value = newValue;
      emit('update:modelValue', newValue);
    }

    return {
      value,
      updateValue
    };
  }
});
</script>

在这个组件中，我们定义了一个props modelValue，用于接收外部传入的值。同时，我们也定义了一个事件 update:modelValue，用于向外部传递更新后的值。

在setup函数中，我们使用ref函数来创建一个响应式变量value，并将props.modelValue的值赋给它。然后，我们使用watch函数来监听props.modelValue的变化，并将它更新到value中。最后，我们定义了一个updateValue函数，用于更新value的值，并将更新后的值通过emit函数传递给外部组件。

在模板中，我们使用v-bind:value指令来将value的值绑定到input元素的value属性上。然后，我们使用v-on:input指令来监听input元素的input事件，并调用updateValue函数来更新value的值。这样就完成了双向同步的功能。