vue3 组件输入框双向绑定

在 Vue3 中，可以使用 `v-model` 指令来实现组件输入框的双向绑定。具体实现步骤如下：

1. 在组件中定义一个 `value` 属性和一个 `updateValue` 方法，用于接收和更新输入框的值。

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

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(newValue) {
      this.$emit('update:value', newValue)
    }
  }
}
</script>

2. 在使用该组件的父组件中，使用 `v-model` 指令来实现双向绑定。

<template>
  <my-input v-model="inputValue"></my-input>
</template>

<script>
import MyInput from './MyInput.vue'

export default {
  components: {
    MyInput
  },
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

这样，当输入框的值发生变化时，父组件中的 `inputValue` 数据也会随之更新。