[Input-number]数字输入框组件

需求

• 加、减按钮
• 初始值
• 最大、最小值
• 数值改变时，触发一个自定义事件来通知父组件

目录文件

• index.html 入口页
• input-number.js 数字输入框组件
• index.js 根实例

实现关键

• Vue组件是单向数据流，无法从组件内部直接修改prop的值，解决办法就是给组件生命一个data，默认引用prop值，然后在组件内部维护这个data

  Vue.component('input-number', {
    data: function () {
        return {
            currentValue: this.value // value来自props里的属性
        }
    }
  });
  

• 上述解决了初始化引用父组件value的问题，但如果父组件更新了value，input-number组件中的currentValue也需要一起更新

  1. 为了实现同步更新的功能，我们需要使用 watch 监听功能(watch选项可以用来监听某个prop或data的改变，并在它们发送改变时，触发watch配置的函数)

  2. 在这里我们要监听两个数据，value和currentView；监听value是为了得知父组件修改了value，监听currentValue是为了当currentValue改变时，更新value

• input中绑定currentValue值，当用户输入结束时使用change事件来更新currentValue，这里不是用input事件(input事件是实时的，change事件是失焦时，从性能上来说change好很多)

• 使用watch选项来监听value与currentValue的改变

  watch: {
        value: function (val) {
            this.updateValue(val);
        },
        currentValue: function (val) {
            this.emit(′input′,val);//this.emit('input', val);
            // this.emit(′input′,val);//this.emit('on-change', val);
        }
  }
  

  虽然也可以在每个会引起currentValue改变的函数中(加、减、输入等方法)向父组件抛出值，但是使用watch可以减少代码的冗余

项目地址