Vue.js 中的 v-model
和 model-value
都是用于实现表单数据的双向绑定的指令。
v-model
是 Vue.js 提供的一个语法糖,可以让开发者在模板中更方便地实现表单数据的双向绑定。当在一个表单元素上使用 v-model
时,它会自动监听元素的 input
或 change
事件,并将表单元素的值同步到相应的 Vue 组件数据中,反之亦然。例如:
<input v-model="message" />
这会将表单元素的值和 Vue 实例中的 message
数据双向绑定。如果用户在表单元素中输入了值,那么 message
数据会自动更新;如果 message
数据发生了变化,表单元素中的值也会自动更新。
model-value
是在 Vue 3 中新增的一个属性,用于在自定义组件中实现表单数据的双向绑定。与 v-model
不同的是,model-value
不是一个指令,而是一个属性,需要在自定义组件的选项中进行配置。例如:
app.component('my-component', {
props: {
modelValue: String
},
emits: ['update:modelValue'],
template: `
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
`
})
这里定义了一个名为 my-component
的自定义组件,并在其 props
中定义了一个名为 modelValue
的属性。组件的模板中使用了这个属性来实现表单元素的值绑定,同时在表单元素的 input
事件中触发了一个名为 update:modelValue
的自定义事件,将输入的值作为参数传递给父组件。在使用这个自定义组件时,可以像下面这样使用 v-model
来实现表单数据的双向绑定:
<my-component v-model="message" />
总的来说,v-model
是 Vue.js 中用于实现表单数据双向绑定的常用指令,而 model-value
是在自定义组件中实现表单数据双向绑定的一种新的方式。