<!DOCTYPE html>
<div id="v-model-example" class="demo">
<my-component v-model.description.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: ['description', 'descriptionModifiers'],
emits: ['update:description'],
template: `
<input
type="text"
:value="description"
@input="$emit('update:description', $event.target.value)">
`,
created() {
console.log(this.descriptionModifiers) // { capitalize: true }
}
}).mount('#v-model-example')
</script>
改了一下,还不对
<!DOCTYPE html>
<div id="v-model-example" class="demo">
<my-component v-model.description.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: {
description: String,
descriptionModifiers: {
default: () => ({})
}
},
emits: ['update:description'],
template: `
<input
type="text"
:value="description"
@input="$emit('update:description', $event.target.value)">
`,
created() {
console.log(this.descriptionModifiers) // { capitalize: true }
}
}).mount('#v-model-example')
</script>
不知道为啥,不知道怎么改