vue3 自定义组件使用v-model

在Vue 3中，你可以使用`v-model`指令来在自定义组件中创建双向绑定。下面是一些使用`v-model`的步骤：

1. 在自定义组件中，将`modelValue`作为props接收父组件的值，并使用`emit`方法触发名为`update:modelValue`的自定义事件。

// MyCustomComponent.vue

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

<script>
export default {
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value);
    }
  }
}
</script>

2. 父组件中，通过使用`v-model`指令来绑定自定义组件的值。

<template>
  <div>
    <my-custom-component v-model="customValue"></my-custom-component>
  </div>
</template>

<script>
import MyCustomComponent from './MyCustomComponent.vue';

export default {
  components: {
    MyCustomComponent
  },
  data() {
    return {
      customValue: ''
    };
  }
}
</script>

这样，当在自定义组件中输入值时，父组件的`customValue`将会被更新，反之亦然。

注意：在Vue 3中，`v-model`指令实际上是一个语法糖，它会被转换成一个`value`属性和一个`input`事件。因此，你也可以手动绑定`value`和`@input`事件来实现相同的效果。