<!DOCTYPE html>
<div id="v-model-example" class="demo">
<my-component v-model.capitalize="myText"></my-component>
{{ myText }}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
myText: ''
}
}
});
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="myText"></my-component>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({ });
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>