一个组件上的`v-model`默认会利用名为`value`的prop(属性)和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将`value`特性用于不同的目的。这时候我们可以在定义组件的时候，通过设置`model`选项可以用来实现不同的处理方式。
在创建组件的时候，添加`model`属性，其中要包含两个属性配置，分别是：
- event：什么时候触发v-model行为
- prop：定义传递给v-model的那个变量，绑定到哪个属性值上
下面是实现计数器作用的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue自定义组件v-model</title> </head> <body> <div id="app"> <Stepper v-model="goodsCount"></Stepper> </div> <script> Vue.component('Stepper', { props: ['count'], template: ` <div> <button @click="sub">-</button> <span>{{count}}</span> <button @click="add">+</button> </div> `, model: { //event:什么时候触发v-model行为 event: 'change-count', // 定义传递给v-model的那个变量，绑定到哪个属性值上 prop: 'count' }, methods: { sub() { // 触发上面model中定义的触发名称 // 这里不需要修改this.count的值，只要把最终的结果传递出去就行 this.$emit("change-count", this.count - 1) }, add() { this.$emit("change-count", this.count + 1) } } }) new Vue({ el: "#app", data: { goodsCount: 0 } }) </script> </body> </html>