<!DOCTYPE html>
<div id="v-model-example" class="demo">
<my-component v-model.title="bookTitle"></my-component>
{{ bookTitle }}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
bookTitle: ''
}
},
});
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
template: `
<input
type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)">
`,
created() {
console.log(this.modelModifiers) // { capitalize: true }
}
}).mount('#v-model-example')
</script>
区别
<!DOCTYPE html>
<div id="v-model-example" class="demo">
<my-component v-model.capitalize="bookTitle"></my-component>
{{ bookTitle }}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
bookTitle: ''
}
},
});
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
template: `
<input
type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)">
`,
created() {
console.log(this.modelModifiers) // { capitalize: true }
}
}).mount('#v-model-example')
</script>