组件详解

Edit me

需求如下：

• 数字输入框只能输入数字（这个需要用到正则，先放一放）

• 包含两个快捷按钮，可以直接-1，或者+1

• 可以设置初始值、最大值和最小值（在父组件定义好，然后使用props传递给子组件）

• 双向改变数据

• 增加一个控制步伐的props，比如设置为10，点击+，就一次增加10。

更多需求：

• 当输入框获取焦点时，按上下键可以增加和减少数字。

几个关键点

父子两级组件的通信

初始值、最小值，最大值都是由父组件决定，需要传递给子组件。

1. 通过v-bind，将这些数据绑定到子组件标签上。
2. 子组件用props选项来接收这些数据。
3. 子组件将接收到的value数据保存到自身的一个变量中，对它进行修改（另一种做法是保存到组件的一个计算属性中）。

子组件里有个表单，与子组件的通信通过v-model来实现双向通信。

1. 通过v-model="value"实现双向绑定，并在子组件上的数据发生变化时，立即释放一个以特殊名称命名，也就是input，的事件，并传递修改后的数据。
2. v-model是个语法糖，它会自动接收到事件，并更新数据。

对更改后的数据进行watch

• 当props的value发生变化时，立即更新currentValue的值
• 当currentValue的值发生变化时，立即释放事件给父级