uni-app number-box组件引用 动态控制数值

再引用number-box组件时，使用过程中根据业务需要，数值的增加比如商城需要考虑实时库存？虽然在列表中增加max库存数，但根据业务需要使用的时增加数量先查询库存的业务，因此就需要动态控制数量值！
只需要做一个小小的优化就可以了！

组件原文件：

<template>  
    <view class="uni-numbox">  
        <view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="_calcValue('subtract')">-</view>  
        <input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">  
        <view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="_calcValue('add')">+</view>  
    </view>  
</template>  
<script>  
    export default {  
        name: 'uni-number-box',  
        props: {  
            value: {  
                type: Number,  
                default: 0  
            },  
            min: {  
                type: Number,  
                default: -Infinity  
            },  
            max: {  
                type: Number,  
                default: Infinity  
            },  
            step: {  
                type: Number,  
                default: 1  
            },  
            disabled: {  
                type: Boolean,  
                default: false  
            }  
        },  
        data() {  
            return {  
                inputValue: this.value  
            }  
        },  
        computed: {  
            disableSubtract() {  
                return this.value <= this.min  
            },  
            disableAdd() {  
                return this.value >= this.max  
            }  
        },  
        watch: {  
            value(val) {  
                this.inputValue = val;  
            },  
            inputValue(val) {  
                this.$emit('change', val);  
            }  
        },  
        methods: {  
            _calcValue(type) {  
                const scale = this._getDecimalScale();  
                let value = this.inputValue * scale;  
                let step = this.step * scale;  

                if (type === 'subtract') {  
                    value -= step  
                } else if (type === 'add') {  
                    value += step  
                }  
                if (value < this.min || value > this.max) {  
                    return  
                }  
                this.inputValue = value / scale;  
            },  
            _getDecimalScale() {  
                let scale = 1;  
                // 浮点型  
                if (~~this.step !== this.step) {  
                    scale = Math.pow(10, (this.step + '').split('.')[1].length);  
                }  
                return scale;  
            },  
            _onBlur(event) {  
                let value = event.detail.value;  
                if (!value) {  
                    this.inputValue = 0;  
                    return  
                }  
                value = +value;  
                if (value > this.max) {  
                    value = this.max;  
                } else if (value < this.min) {  
                    value = this.min  
                }  
                this.inputValue = value  
            }  
        }  
    }  
</script>  
<style>  
    .uni-numbox {  
        display: flex;  
        flex-direction: row;  
        justify-content: flex-start;  
        height: 70upx;  
    }  

    .uni-numbox-minus,  
    .uni-numbox-plus {  
        margin: 0;  
        background-color: #f9f9f9;  
        width: 80upx;  
        height: 100%;  
        line-height: 70upx;  
        text-align: center;  
        color: #555555;  
    }  

    .uni-numbox-minus {  
        border: 2upx solid #cccccc;  
        border-right: none;  
        border-top-left-radius: 6upx;  
        border-bottom-left-radius: 6upx;  
    }  

    .uni-numbox-plus {  
        border: 2upx solid #cccccc;  
        border-left: none;  
        border-top-right-radius: 6upx;  
        border-bottom-right-radius: 6upx;  
    }  

    .uni-numbox-value {  
        border: 2upx solid #cccccc;  
        background-color: #ffffff;  
        width: 80upx;  
        height: 100%;  
        text-align: center;  
    }  

    .uni-numbox-disabled {  
        color: #c0c0c0;  
    }  
</style>  

引用组件web中代码：(其中item.num为动态值，item为列表循环项目)

<block v-for="(item,index) in cartList" :key="index">  
<uni-number-box :value="item.num" :min="1" v-on:change="onNumberChange($event,item)"></uni-number-box>  
</block>

组件返回的信息

            onNumberChange(value,e) {   
                if(value==e.num){ //防止重复传送  
                    return false;  
                }  
                uni.request({  
                    url: '',  
                    method: 'POST',  
                    header: {'content-type': 'application/x-www-form-urlencoded'},  
                    data: {},  
                    success: res => {  
                        if(!res.data.datas.error){  
                            e.num = res.data.datas.num; //服务器返回值 根据业务需要写  
                            }else{  
                                uni.showToast({ title: res.data.datas.error,icon:"none"});  
                            }  
                    }  
                });  
            }

使用过程中，我们会发现，服务器接受了数量后才会同意该值，当不接受的时候 我们就得把后来增加的值恢复到没增加之前，动态改变item.num为原来的值的时候，而组件并为更新，原来才原值没有变化或相同的情况下组件并不会更新！
那么我们就需要修改一下组件，让它能实时更新和掌控
找到组件中以下代码

        watch: {  
            value(val) {  
                this.inputValue = val;  
            },  
            inputValue(val) {  
                this.$emit('change', val);  
            }  
        }

修改为：

        watch: {  
            value(val) {  
                this.inputValue = val;  
            },  
            inputValue(val) {  
                this.$emit('change', val);  
                if(this.value){  
                if(this.value!=this.inputValue){  
                    this.inputValue = this.value;  
                }}  
            }  
        }

这样就完成了后端控制数量的增减过程