vue学习笔记 - 组件通信01

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

在vue中使用组件

Vue.component('input-number',{
	template:'\
		<div class="input-number">\
			<input type="text" @focus="focusEvent" @blur="blurEvent" @keydown="keyEvent" :value="currentValue" @change="handleChange">\
			<button @click="handleDown" :disabled="currentValue <= min">-</button>\
			<button @click="handleUp" :disabled="currentValue >= max">+</button>\
		</div>\
	',
	props:{
		max:{
			type:Number,
			default:Infinity
		},
		min:{
			type:Number,
			default:-Infinity
		},
		value:{
			type:Number,
			default:0
		},
		step:{
			type:Number,
			default:1
		}
	},
	data:function(){
		return {
			currentValue:this.value,
			isfocus:false
		}
	},
	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.min)val = this.min;
			this.currentValue = val;
		},
		handleDown:function(){
			if(this.currentValue<=this.min)return;
			this.currentValue-=this.step;
		},
		handleUp:function(){
			if(this.currentValue>=this.max)return;
			this.currentValue+=this.step;
		},
		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<min){
					this.currentValue = min;
				}
			}else{
				event.target.value = this.currentValue;
			}
		},
		focusEvent:function(event){
			this.isfocus = true;
		},
		blurEvent:function(event){
			this.isfocus = false;
		},
		keyEvent:function(event){
			if(this.isfocus){
				if(event.keyCode == 38){
					// 上方向键
					this.handleUp();
				}else if(event.keyCode == 40){
					// 下方向键
					this.handleDown();
				}
			}
		}
	},
	mounted:function(){
		this.updateValue(this.value);
	}
})
function isValueNumber (value){
	return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value);
}

引入插件

<input-number v-model="value" :max="10" :min="0" :step="2">