知识点
v-model双向绑定value
父组件向子组件传递数据props
解决单向数据流的问题，在子组件的data选项中声明一个currentValue，默认使用value的值
data: function() {return {currentValue: this.value,prop_step: 10};}
watch选项监听prop或data的改变
watch: {currentValue: function (val) {this.$emit('input',val);this.$emit('on-change',val);},value:function (val) {this.updateValue = val;}}
第一次初始化的时候对value进行过滤
updateValue:function (val) {if(val > this.max) val = this.max;if(val < this.min) val = this.min;this.currentValue = val;}
v-on事件监听，加减数据，在子组件的methods中添加方法
<button @click="handleDown" :disabled="currentValue <= min">-</button><button @click="handleUp" :disabled="currentValue >= max">+</button>
在表单中增加对键盘上下键的支持@keyup.up='handleUp' @keyup.down='handleDown'
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>数字输入框组件</title></head><body><div id="app"><input-number v-model = 'value' :max = '10' :min = '0'></input-number></div><template id="input-number"><div class="input-number"><input @keyup.up='handleUp' @keyup.down='handleDown' type="text" :value="currentValue" @change="handleChange" @keyup.up='handleUp' @keyup.down='handleDown'/><button @click="handleDown" :disabled="currentValue <= min">-</button><button @click="handleUp" :disabled="currentValue >= max">+</button></div></template><script src="../js/vue.js"></script><script>ponent('input-number', {template: '#input-number',props: {max: {type: Number,default: Infinity},min: {type: Number,default: -Infinity},value: {type: Number,default: 0}},data: function() {return {currentValue: this.value,prop_step: 10};},watch: {currentValue: function (val) {this.$emit('input',val);this.$emit('on-change',val);},value:function (val) {this.updateValue = val;}},methods:{//过滤出正确的currentValueupdateValue:function (val) {if(val > this.max) val = this.max;if(val < this.min) val = this.min;this.currentValue = val;},handleDown:function () {if (this.currentValue <= this.min) return;this.currentValue -= this.prop_step;},handleUp:function () {if (this.currentValue >= this.max) return;this.currentValue += this.prop_step;},handleChange:function (event) {var val = event.targrt.value.trim();var max = this.max;var min = this.min;if (isValueNumber(val)){val = Number(val);this.currentValue = val;if(val > max){this.currentValue = max;}else if (val < min){this.currentValue = min;}}else {event.target.value = this.currentValue;}}},//第一次初始化时，也对value进行过滤mounted:function () {this.updateValue(this.value);}});let app = new Vue({el: '#app',data:{value: 5}});</script></body></html>
