html接收model值_Vue3中v-model的使用

在Vue3中，使用v-model需要在组件中添加一个名为`modelValue`的prop，并在对应的input或者其他表单元素上绑定`v-model="modelValue"`，同时添加一个`emit`事件将更新后的值传递回父组件。具体实现如下：

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

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  }
}
</script>

在父组件中使用该组件时，可以直接使用`v-model`进行双向绑定：

<template>
  <div>
    <my-input v-model="inputValue"></my-input>
    <p>当前输入的值是：{{inputValue}}</p>
  </div>
</template>

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

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

这样，在子组件中输入的值会通过`update:modelValue`事件传递回父组件，从而实现双向绑定。