在Vue 3中，v-model是一个非常有用的指令，它可以创建双向绑定。它可以用在原生HTML标签和组件上。
原生标签上使用v-model
<template>
<input v-model="message" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('');
return { message };
}
}
</script>
组件上使用v-model
假设你有一个自定义的输入组件MyInput.vue：
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
<script>
export default {
props: {
modelValue: String,
},
emits: ['update:modelValue'],
}
</script>
你可以这样使用它：
<template>
<MyInput v-model="message" />
</template>
<script>
import { ref } from 'vue';
import MyInput from './MyInput.vue';
export default {
components: {
MyInput
},
setup() {
const message = ref('');
return { message };
}
}
</script>
v-model参数
如果你想要自定义v-model的属性名，可以使用v-model参数：
<MyInput v-model:custom-prop="message" />
在MyInput组件中，你需要监听update:custom-prop事件并定义custom-prop属性：
<script>
export default {
props: {
customProp: String,
},
emits: ['update:customProp'],
}
</script>
绑定多个v-model
你可以在一个组件实例中使用多个v-model绑定：
<template>
<div>
<input v-model="message1" placeholder="Message 1" />
<input v-model="message2" placeholder="Message 2" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message1 = ref('');
const message2 = ref('');
return { message1, message2 };
}
}
</script>
以上代码演示了在Vue 3中如何使用v-model进行数据双向绑定，包括在原生HTML标签和组件上的使用，以及如何通过参数自定义v-model的行为。