vue2的model选项使用场景
时间: 2023-10-04 17:04:06 浏览: 189
Vue 2 的 model 选项主要用于在自定义组件中,通过 v-model 指令实现双向绑定。在自定义组件中,如果需要实现双向绑定,需要将组件的值传递给父组件,同时在父组件中修改值时,也需要将新的值传递给子组件。
在 Vue 2 中,通过在组件选项中定义 model 选项,可以简化这个过程。model 选项的值是一个对象,包含了 prop 和 event 两个属性。其中,prop 属性指定了父组件中用于接收子组件值的 prop 名称,默认为 value;event 属性指定了子组件中用于触发父组件更新的事件名称,默认为 input。
举个例子,假设我们有一个自定义的数字输入框组件 MyNumberInput,可以通过 v-model 指令实现双向绑定。在组件选项中定义 model 选项如下:
```
Vue.component('my-number-input', {
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: Number,
default: 0
}
},
template: `
<input
type="number"
:value="value"
@input="$emit('change', +$event.target.value)"
>
`
})
```
在父组件中,通过 v-model 指令即可实现与子组件的双向绑定:
```
<my-number-input v-model="num"></my-number-input>
```
这样,当父组件中的 num 值发生变化时,子组件中的输入框也会同步更新;当子组件中输入框的值发生变化时,父组件中的 num 值也会同步更新。