vue学习笔记 - 组件通信01

组件是vue最核心的功能，组件化你的前端页面，能大大的提高重用性，让代码可复用，维护起来简直爽的飞起，举例来说就比如一些评论输入框。

在vue中使用组件

Vue.component( 'input-number',{

        template:'

           

             -   

             +

        

',

        props:{

            max:{

                type:Number,

                default:Infinity

            },

            min:{

                type:Number,

                default:-Infinity

            },

            value:{

                type:Number,

                default:0

            }

        },

        data: function(){

            return { 

                        currentValue:this.value

                    }

        },

       watch:{

            currentValue:function(val){

                    this.$emit('input',val);

                    this.$emit('on-change',val);

            },

            value:function(val){

                    this.updateValue(val);

            }

        },

        methods:{

            updateValue:function(val){

                    if(val>this.max)val = this.max;

                    if(val=this.max)return;

                    this.currentValue+=1;

            },

            handleDown:function(){                 if(this.currentValue<=this.min)return;

                this.currentValue-=1;

            },

            handleUp:function(){                 if(this.currentValue>=this.max)return;         

               this.currentValue+=1;

            },

            handleChange:function(event){

                    var val = event.target.value.trim();

                    var max = this.max;

                    var min = this.min;

                    if(isValueNumber(val)){

                        val = Number(val);

                        this.currentValue = val;

                        if(val>max){

                            this.currentValue = max;

                        }else if(val

                             this.currentValue = min;

                        }

                    }else{

                            event.target.value = this.currentValue;

                    }

              },

        },

        mounted:function(){            

             this.updateValue(this.value);

        }

});

function isValueNumber (value){

    return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value);

}

引入插件