vue3 组件v-model

Vue 3 中的组件使用 `v-model` 可以实现双向绑定，类似于 Vue 2 中的组件。不过在 Vue 3 中，`v-model` 的实现方式有所变化。

在 Vue 3 中，我们使用 `emits` 属性来声明组件的自定义事件，然后使用 `v-model` 来绑定一个值和一个自定义事件。具体的使用方式如下：

1. 在父组件中，可以通过 `v-model` 来绑定子组件的值和自定义事件：

<template>
  <ChildComponent v-model="value"></ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent'

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

2. 在子组件中，需要接收 `value` 和 `update:modelValue` 这两个 props，并在内部使用 `modelValue` 来维护组件的值。当值发生变化时，通过 `$emit` 方法触发 `update:modelValue` 事件。

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

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

这样，父组件中的 `value` 就会与子组件中的 `modelValue` 实现双向绑定了。

需要注意的是，在 Vue 3 中，`v-model` 绑定的属性名默认是 `modelValue`，而不再是 `value`。如果想要修改绑定的属性名，可以使用 `model` 选项。例如，可以将 `v-model="value"` 修改为 `v-model:title="value"`，然后在子组件中将 `modelValue` 改为 `title` 即可。

这就是 Vue 3 中组件的 `v-model` 的用法。希望能对你有所帮助！如果你还有其他问题，请随时提问。