如何在Vue中使用数字输入框组件-创新互联

初始化结构搭好后，由于要设置初始值，大值、最小值，我们在父组件中的 < input-number>< /input-number>上设置这些值，并且通过Props将父组件数据传递给子组件

父组件中添加数据：value是一个关键的绑定值，所以用v-model，实现双向绑定。

在子组件中添加props选项：

 props: {
  max: {
  type: Number,
  default: Infinity
  },
  min: {
  type: Number,
  default: -Infinity
  },
  value: {
  type: Number,
  default: 0
  }
 },

我们知道，Vue组件时单项数据流，所以无法在子组件上更改父组件传递的数据，在这里子组件只改变value值，所以我们给子组件设置一个data数据，默认引用value值，然后在组件内部维护这个data。

data() {
  return{
  // 保存初次父组件传递的数据
  currentValue : this.value,
  }
 }

并且给子组件的input元素绑定value

这样只解决了初始化时引用父组件value的问题，但是如果父组件修改了value，子组件无法感知，我们想要currentValue一起更新。那么就要使用wacth监听选项监听value。

• 当父组件value发生变化时，子组件currentValue也跟着变化。

• 当子组件currentValue变化时，使用$emit触发v-model，使得父组件value也跟着变化

watch: {
  // 监听属性currentValue与value
  currentValue(val) {
  // currentValue变化时，通知父组件的value也变化
  this.$emit('input', val);
  

  },
  value(val) {
  // 父组件value改变时，子组件currentValue也改变
  this.updataValue(val);
  }
 }，
 methods: {
  updataValue(val) {
  if(val > this.max) val = this.max;
  if(val < this.min) val = this.min;
  this.currentValue = val;
  }
  },
  // 第一次初始化时，也对value进行过滤
 mounted: function() {
  this.updataValue(this.value);
 }

上述代码中，生命周期mounted钩子也使用了updateValue()方法，是因为初始化时也要对value进行验证。

父子间的通信解决差不多了，接下来完成按钮的操作：添加handleDown与handleUp方法

template: `
  
  
  -
  = max">+