这里分享一个工作中 一个写的一个正整数input输入框

业务场景：新建的模具修改单，里面需要填写模具的变更寿命，因此需要写正整数。

说组件前，先分享一下自定义组件的 v-model，因为在要分享的组件里面就用到了自定义组件的v-model。

为啥要用自定义组件的v-model，因为默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突。

直接复制官方的代码示例吧

其实v-model这个是一个语法糖。这个具体是什么意思，自行百度。

下面介绍自定义组件

先看html代码

在input标签上面绑定了一个val属性值，这个属性值是根据父组件传递进来的value去赋值的。还绑定了一个handleChange的方法，当input值改变时就会触发这方法

再看script

这里面有3个属性是从父组件传递过来的值，一个是值的多少：value，定义类型为字符串和数字；一个是最大值：max，定义类型为数字；一个是最小值：min，定义类型为数字。还有定义了一个handleChange的方法，方法用途是把值取整

在看看在父组件里面是怎么使用的，通过import导入intInput。

在父组件的components里面加入intInput就好了。

那现在拿到intInput组件和配置好了，那该怎么使用呢？其实很简单，只需要在html里面加入<intInput></intInput>一对标签就好了，在这里要提醒一点就是标签最好根据驼峰的规则，要写成<int-input></int-input>。下面就是直接在父组件里面的写法，传入最大最小值，传入绑定的值。

这样就完成了一个很简单的小组件