vue3 组件model传值

在 Vue3 中，为了使用组件的 model 选项，我们需要使用 `emits` 选项来定义组件的自定义事件。下面是一个简单的例子：

<template>
  <div>
    <input type="text" :value="value" @input="$emit('update:value', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  emits: ['update:value']
}
</script>

在上面的代码中，我们定义了一个名为 `value` 的 props，它用于接收父组件传递的值。在模板中，我们使用 `value` props 绑定输入框的值，并在输入框的 `input` 事件中触发名为 `update:value` 的自定义事件，并将输入框的值作为参数传递。最后，我们使用 `emits` 选项来定义了 `update:value` 事件，以便在父组件中使用 `v-model` 语法糖来修改子组件的值。

下面是一个使用上述组件的例子：

<template>
  <div>
    <my-input v-model="inputValue" />
    <p>Input value: {{ inputValue }}</p>
  </div>
</template>

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

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

在上面的代码中，我们使用 `v-model` 语法糖来绑定子组件的值，并且在父组件中使用 `inputValue` 数据来接收子组件的值。