目录
设计通用组件的一般思路组件效果1. HTML结构2. index.js3. input-number.js3.1 input-number.js代码注解设计通用组件的一般思路
明确需求；
设计API（组件的API：只来自props、events 和 slots）；
2.1 确定命名、规则
2.2 编写业务逻辑
即使逻辑的第一版没做好，后续还可迭代完善；但如果 API 没设计好，后续修改成本很高。
组件效果
1. HTML结构
由于本示例以交互功能为主，CSS美化样式简单处：
基本结构代码，初始化项目如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输入框组件</title><style>#app {width: 260px;height: 80px;line-height: 80px;margin: 100px auto;border: 1px solid #a5a5a5;}.input-number input {width: 70px;margin-left: 50px;text-align: center;}.input-number button {width: 24px;text-align: center;}</style></head><body><div id="app"><!--在父组件引入input-number 组件，并给它－个默认值1，最大值10，最小值0--><input-number v-model="value" :max="10" :min="1"></input-number></div><script src="/npm/vue/dist/vue.js"></script><script src="input-number.js"></script><script src="./index.js"></script></body></html>
注：value是一个关键的绑定值， 所以用了v-model，这样既优雅地实现了双向绑定，也让API看起来很合理。大多数的表单类组件都应该有一个v-model， 比如输入框、单选框、多选框、下拉选择器等。
2. index.js
var app = new Vue({el: '#app',data: {value: 1}})
3. input-number.js
完整代码：
function isValueNumber(value) {return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');}ponent('input-number', {template: `<div class="input-number"><input type="text" @keyup="currentKeyCode" :value="currentValue" @change='handleChange'> <button @click="handleDown" :disabled="currentValue<=min">-</button><button @click="handleUp" :disabled="currentValue>=max">+</button></div>`,props: {max: {type: Number,default: Infinity},min: {type: Number,default: Infinity},value: {type: Number,default: 1}},data() {return {currentValue: this.value}},// 监听prop 或 data 值的改变watch: {//监听currentValue ,当currentValue 改变时，更新valuecurrentValue: function(val) {//使用 v-model 时改变valuethis.$emit('input', val);//触发自定义事件on-change,告知父组件数字输入框的值有所改变this.$emit('on-change', val);},// 监听value 知晓从父组件修改了valuevalue: function(val) {//this 指向当前组件实例，所以可直接调用this.updateValue（）this.updateValue(val)}},methods: {handleDown: function() {if (this.currentValue <= this.min) return;this.currentValue -= 1;},handleUp: function() {if (this.currentValue >= this.max) return;this.currentValue += 1;},//过滤出符合条件（最大值、最小值）的正确的currentValueupdateValue: function(val) {if (val > this.max) val = this.max;if (val < this.min) val = this.min;this.currentValue = val;},//（在输入框获取焦点时）增加对键盘上下按键的支持，实现 +1 和-l 操作currentKeyCode: function(e) {if (e.keyCode == 40) {if (this.currentValue <= this.min) return;this.currentValue -= 1;} else if (e.keyCode == 38) {if (this.currentValue >= this.max) return;this.currentValue += 1;}},handleChange: function(e) {var val = e.target.value.trim();var max = this.max;var min = this.min;// 如果输入的数字符合要求，则把输入的值赋给 currentValue。if (isValueNumber(val)) {val = Number(val);this.currentValue = val;if (val > max) {this.currentValue = max;} else if (val < min) {this.currentValue = min;}} else {// 如果输入非数字，则将该内容重置为之前的currentValue。e.target.value = this.currentValue}}},//生命周期钩子函数mounted: function() {// 首次初始化时，对 value 进行过滤。this.updateValue(this.value)}})
3.1 input-number.js代码注解
组件配置都在这里面定义。先在template里定义了组件的根节点，因为是独立组件，所以应该对每个prop 进行校验。这里根据需求有最大值、最小值、默认值（也就是绑定值） 3 个 prop，max和min都是数字类型，默认值是正无限大和负无限大； value 也是数字类型，默认值是 1 。
Vue 组件是单向数据流，所以无法从组件内部直接修改prop value的值。
解决办法：给组件声明一个data，默认引用value的值，然后在组件内部维护这个data。
但是，这样只解决了初始化时引用父组件value的问题， 如果从父组件修改了value,input-number组件的currentValue也要一起更新。
为了实现这个功能， 需要用到监听（watch）。watch 选项用来监听某个prop或data的改变， 当它们发生变化时，就会触发watch配置的函数，从而业务逻辑。
这里需要监听两个量：value和currentValue. 监听value 是要知晓从父组件修改了value，监听currentValue是当currentValue改变时，更新value。
