需求
  • 加、减按钮
  • 初始值
  • 最大、最小值
  • 数值改变时，触发一个自定义事件来通知父组件
目录文件
  • 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.<span class="katex" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="katex-mathml" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">emit(<mo mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">′input<mo mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">′<mo separator="true" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">,val)<mo separator="true" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">;<mi mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">/<mi mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">/this<mi mathvariant="normal" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">.<annotation encoding="application x-tex"="" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">emit('input', val);
              // this.<span class="katex-html" aria-hidden="true" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="base" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="strut" style="height:1.001892em;vertical-align:-0.25em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">e<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">m<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">i<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">t<span class="mopen" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mopen" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">(<span class="msupsub" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist-t" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist-r" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist" style="height:0.751892em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span style="top:-3.063em;margin-right:0.05em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="pstrut" style="height:2.7em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="sizing reset-size6 size3 mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">′<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">i<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">n<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">p<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">u<span class="mord" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">t<span class="msupsub" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist-t" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist-r" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="vlist" style="height:0.751892em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span style="top:-3.063em;margin-right:0.05em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="pstrut" style="height:2.7em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="sizing reset-size6 size3 mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mtight" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">′<span class="mpunct" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">,<span class="mspace" style="margin-right:0.16666666666666666em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord mathit" style="margin-right:0.03588em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">v<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">a<span class="mord mathit" style="margin-right:0.01968em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">l<span class="mclose" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">)<span class="mpunct" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">;<span class="mspace" style="margin-right:0.16666666666666666em;" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span class="mord" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">/<span class="mord" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">/<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">t<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">h<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">i<span class="mord mathit" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">s<span class="mord" style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;">.emit('on-change', val);
          }
    }

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

项目地址

[Input-number]数字输入框组件的更多相关文章

  1. 基于Vue的数字输入框组件开发

    1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...

  2. Vue(八) 数字输入框组件案例

    数字输入框是对普通输入框的扩展,用来快捷输入一个标准的数字,如图: 代码: <div id="app"> <input-number v-model=" ...

  3. 《vue.js实战》练习---数字输入框组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. 动手写个数字输入框1：input[type=number]的遗憾

    前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...

  5. Vue第一个自定义组件：数字输入框(number-input)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【input】输入框组件说明

    input输入框组件 原型: <input value="[String]" type="[text | number | idcard | digit]" ...

  7. 第二百一十三节，jQuery EasyUI，NumberBox(数值输入框)组件

    jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI ...

  8. WPF数字输入框和IP地址输入框

    数字输入框 简介 在业务中,我们经常需要限制用户的输入,比如限制输入长度,限制只能输入数字等等.限制输入长度WPF内置的TextBox已经帮我们解决了,但是限制输入数字却并未在WPF中内置解决方案.使 ...

  9. NumberSpinner( 数字微调) 组件

    本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个组件依赖于Numberbox(数值输入框)和 Spinner(微调)组件. 一． 加载方式//class 加载方式<i ...

随机推荐

  1. 【接口测试】HttpClient+fastJson 总结与案例

    多次理解,反复练习,破釜沉舟. HttpCLient是什么 Apache Jakarta Common 下的子项目 支持 HTTP 协议的客户端编程工具包 支持 HTTP 协议最新的版本 怎么利用Ht ...

  2. D^3ctf两道 pwn

    这次 的D^3ctf 又是给吊打 难顶... 所以题都是赛后解出来的,在这感谢Peanuts师傅 unprintableV 看看保护: 看看伪代码,其实代码很少 void __cdecl menu() ...

  3. Selenium+Java（六）Selenium 强制等待、显式等待、隐实等待

    前言 在实际测试过程中,由于网速或性能方面的原因,打开相应的网页后或在网页上做了相应的操作,网页上的元素可能不会马上加载出来,这个时候需要在定位元素前等待一下,等元素加载出来后再进行定位,根据实际使用 ...

  4. theano function参数

    train_rbm = theano.function( [index], # inputs cost, # outputs updates=updates, givens={ x: train_se ...

  5. linux系统资源查看常用命令

    1.vmstat vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.IO读写.CPU活动等进行监视.它是对系统的整体情况进行统计, ...

  6. Linux如何切换图形界面和命令行界面

    在命令行,输入 init 3 命令,并按回车键执行,切换到命令行界面 切换到命令行界面后,在界面上只显示一个闪烁的光标,按下 Ctrl+Alt+F6(非虚拟机)或者 Alt+F6(虚拟机),显示用户登 ...

  7. 使用python2连接操作db2

    在python2.6下连接db2,步骤: 1.安装python2.6. (注:目前db2的驱动还不支持2.7) 2.安装setuptools,下载地址http://pypi.python.org/py ...

  8. C#使用Consul集群进行服务注册与发现

    前言 我个人觉得,中间件的部署与使用是非常难记忆的:也就是说,如果两次使用中间件的时间间隔比较长,那基本上等于要重新学习使用. 所以,我觉得学习中间件的文章,越详细越好:因为,这对作者而言也是一份珍贵 ...

  9. 互联网大厂Java面试题集—Spring boot常见面试题（二）

    Spring Boot的核心功能与使用优点? 核心功能: 1)Spring Boot项目为独立运行的spring项目,java -jar xx.jar即可运行. 2)内嵌servlet容器(可以选择内 ...

  10. python_编程面试题

    使用递归方法对一个数组求最大值和最小值 """ 用递归算法求解一个数组的最大值和最小值 思路: 1.首先假设这个列表只有1个元素或两个元素 2.再考虑超过两个元素的情况, ...