据 《Vue.js 实战》 实例 开发一个数字输入框组件

开发一个数字输入框组件

作用

数字输入框是对普通输入框的扩展，用来快捷输入一个标准的数字

基本需求

只能输入数字，而且有两个快捷按钮，可以直接减1或加1。除此之外，还可以设置初始值、最大值、最小值，在数值改变时，触发一个自定义事件来通知父组件。

目录文件组成

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

思路梳理

阶段一

在组件中 有三个字段 max min value(默认值)
因为是独立组件，所以要对每个 prop进行校验。(通过prop向子组件传递数据)

在 index.html 中 引入input-number 组件

代码如下 <input-number v-model="value" :max="10" :min="0"> </input-number>
v-model 双向绑定 value
:max :min 向子组件props中传递数据

Vue组件单向数据流问题

无法从组件内部直接修改 prop value的值
故 在子组件中 声明一个 data 引用 value的值 在组件内部进行维护
在 子组件中 data需要写一个function进行return

data:function(){
		return{
			currentValue:this.value
		}

阶段二

实现父组件修改了 value currentValue 同步 使用watch进行监听

1. 监听 value 要知晓从父组件修改了 value
   在父组件里修改 value，即修改 data中的 value吧 (暂时理解)

2. 监听 currentValue 是为了 当currentValue 改变时 ，更新value
   代码如下

在这里插入代码片