Vue2.0 组件components

组件三部曲  定义组件-->注册组件-->使用组件

 案例思路：

	
		
		
		
		
	 
	
		

			
			
组件传参
			
父传子
			
			

			
			

		
		
	

// 01定义组件
var step = {
	template: `
				 -
				 
				 +
				 `,
	props: { //props接受父组件传递过来的参数  父传子
		value: { //参数名称value
			type: Number,
			default: 1 //默认值是1  如果不传value的值是1
		},
		min: {
			type: Number,
			default: 1
		},
		max: {
			type: Number,
			default: 999
		},
		step: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			count: this.value //count的默认值是父组件传过来的参数value
		}
	},
	watch: {
		count: {
			handler() {
				// 限定最大值  最小值
				if (this.count >= this.max) {
					this.count = this.max
				};
				if (this.count <= this.min) {
					this.count = this.min
				};
				//子传父 通过emit发送事件
				this.$emit("input", this.count);

			},
			deep: true,
		},
		value: {
			handler() {
				this.count = this.value;
			},
			deep: true
		}
	}

}
//为什么不直接使用this.value和input框绑定
// 因为 父组件传到子组件的参数必须是只读
// 当count的数据局发生变化时通知父组件更新数据