1. 基本用法：
在 Vue 3.0 中，v-model 仍然可以通过简单的绑定来实现双向数据绑定，但语法上稍有变化：
<template>
<div>
<!-- 使用 v-model 进行双向数据绑定 -->
<input v-model="message" />
<p>{{ message }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 定义响应式数据
const message = ref('Hello from Vue 3.0');
// 返回数据和对应的 v-model 绑定
return { message };
}
};
</script>
2. 自定义 v-model 名称：
在 Vue 3.0 中，你可以通过 v-model 指令的 .prop 修饰符来指定一个自定义的 prop 名称。这使得你可以更灵活地定制 v-model 的行为：
<template>
<div>
<!-- 使用自定义 v-model 名称 -->
<custom-input v-model:customValue="message" />
<p>{{ message }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello from Vue 3.0');
return { message };
}
};
</script>
在上述示例中，customValue 是自定义的 prop 名称，它会传递给 custom-input 组件。
3. 在子组件中接收 v-model：
在子组件中，可以使用 modelValue 和 emit 来接收和触发 v-model：
<!-- custom-input.vue -->
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event)" />
</template>
<script>
export default {
props: {
modelValue: String
}
};
</script>
在上述子组件中，modelValue 是默认的 v-model prop 名称，通过 @input 事件触发更新。
这些变化使得在 Vue 3.0 中使用 v-model 更加灵活，同时引入了一些新的特性，适应了 Composition API 的使用方式。
转载请注明出处：http://www.zyzy.cn/article/detail/557/Vue 3.0