Vue.js 中的 v-modelmodel-value 都是用于实现表单数据的双向绑定的指令。

v-model 是 Vue.js 提供的一个语法糖,可以让开发者在模板中更方便地实现表单数据的双向绑定。当在一个表单元素上使用 v-model 时,它会自动监听元素的 inputchange 事件,并将表单元素的值同步到相应的 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 是在自定义组件中实现表单数据双向绑定的一种新的方式。

1679989833734.png

如果觉得我的文章对你有用,请随意赞赏