vue3+ts中 实现v-model:username

可以通过在组件中使用`v-model`指令来实现双向数据绑定。在 Vue3 中，可以使用 TypeScript 类型来定义一个组件的 prop 和 data。

具体实现方法如下：

1. 在组件中定义一个`username`的 prop，类型为`string`。

props: {
  username: {
    type: String
  }
},

2. 在组件中定义一个 emit 事件，将组件内部的`username`状态改变时的值，通过该事件发送给父组件。

methods: {
  updateUsername(event: Event) {
    this.$emit('update:username', (event.target as HTMLInputElement).value);
  }
}

3. 在模板中使用`v-model`指令将组件内部的`username`状态和父组件传入的`username` prop 进行绑定。

<template>
  <input type="text" v-model="username" @input="updateUsername">
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    username: {
      type: String
    }
  },
  methods: {
    updateUsername(event: Event) {
      this.$emit('update:username', (event.target as HTMLInputElement).value);
    }
  }
});
</script>

上述代码中，当在父组件中使用该组件时，可以通过`v-model`指令将组件内部的`username`状态和父组件中的`username` prop 绑定起来。

例如：

<template>
  <div>
    <CustomInput v-model:username="username" />
    <p>{{ username }}</p>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import CustomInput from './CustomInput.vue';
export default defineComponent({
  components: {
    CustomInput
  },
  setup() {
    const username = ref('');
    return { username };
  }
});
</script>

上述代码中，当用户在 `CustomInput` 组件中输入内容时，`username` 的值会同步更新，最终在父组件中渲染出来。