渡一 vue3.0 v-model

在Vue 3.0中，v-model的用法与之前的版本略有不同。在Vue 3.0中，v-model指令可以直接用于自定义组件上，而不仅仅局限于原生的表单元素。

在使用自定义组件上的v-model时，你需要在组件中使用`emits`选项来声明一个自定义事件。然后，在组件内部，通过`$emit`方法触发该事件来更新父组件中的数据。

下面是一个示例，展示了如何在Vue 3.0中使用v-model：

// 在父组件中
<template>
  <ChildComponent v-model="value" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const value = ref('');

    return {
      value
    };
  }
}
</script>

// 在子组件中（ChildComponent.vue）
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

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

在上述示例中，父组件中的`value`变量通过v-model传递给了子组件。子组件中的输入框的值通过`modelValue`属性进行绑定，并且通过`@input`事件和`$emit`方法来更新父组件中的`value`变量。

这就是在Vue 3.0中使用v-model的基本用法。希望对你有所帮助！