这个属性通常不太会注意到,但有的时候用起来比较舒服,下面就来具体说说这个属性。
model
官网解释:允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
简单来讲就是将组件实现数据双向绑定的效果,需要注意的是自定义组件
字眼表明其主要的使用场景是在组件内部,后面的那一大段是说明缘由的。
举个例子:
为了获取input
输入框的值,在Vue.js中我们需要使用v-model指令绑定当前标签上,如下,
<input v-model="name" />
其实v-model
在Vue.js中的实现是语法糖,上面的代码等价于<input :value="name" @input="$event.target.value"/>
, Vue.js会监听用户输入事件,不同的控件自动监听对应的事件,比如:select
-> value 作为 prop、change 作为事件
、text/textarea
-> value property 和 input 事件
等,通过v-model
实现数据的双向绑定。
当然,大多的时候我们还是需要实现自己业务的组件,这个时候如果也想简单的实现双向绑定,能够使用v-model
,就需要借助model
这个属性了。
比如说你有个组件如下:
Vue.component('my-comp', {
model: {
event: 'update'
},
props:
value: [String, Number]
},
// ...
methods: {
func (val) {
this.$emit('update', val)
}
}
})
你在使用的时候就可以这么用:
<my-comp v-model="fd"></my-comp>
上面的代码就等价于
<my-comp
v-bind:value="fd"
@update="val => {fd = val}"
/>
如果你不想使用value
做props
,这个时候你可以这么写:
props: {
selected: [String, number]
}
model: {
prop: 'selected',
event: 'update'
}
其他的代码不用更改,这个也是有问题的,只能使用v-model
得到子组件的传参,父组件内绑定的值更新后,子组件没更新ui,所以这个时候还需要对子组件的props进行监听处理。