自定义组件，添加 v-model
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| Vue.component('number-box', {
model: {
prop: 'myvalue',
event: 'input'
},
props: {
myvalue: {
type: Number,
default: 0
}
},
template: `
<div>
<span @click="$emit('input',myvalue-1)">-</span>
<span>{{myvalue}}</span>
<span @click="$emit('input',myvalue+1)">+</span>
</div>
`
})
|
调用组件
1
| <number-box v-model="invalue"></number-box>
|
这里的 invalue 的值将会传入这个名为 myvalue 的 prop。同时当 触发一个 input 事件并附带一个新的值的时候，这个 invalue 的 property 将会被更新。