自定义组件问题

来源：2-15 自定义组件(上)

qq_一个人一個人_0

2018-12-02 10:26:53

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>简易数字输入框组件</title>
</head>
<body>
	<div id="app">
		<input-number v-model="value" :max="20" :min="0"></input-number>
	</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<script src="index.js"></script>
</html>

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

Vue.component('input-number', {
	template: '\
	<div class="input-number">\
	<input\
		type="text"\
		: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
		}
	},

	data() {
		return{
			currentValue: this.value
		}
	},

	watch: {
		currentValue: function(val) {
			this.$emit('input', val);
			this.$emit('on-change', val);
		},
		value: function(val) {
			this.updateValue(val);
		}
	},

	methods: {
		handleDown: function() {
			if(this.currentValue <= this.min) return;
			this.currentValue -= 1;
		},
		handleUp: function() {
			if(this.currentValue >= this.max) return;
			this.currentValue += 1;
		},
		updateValue: function(val) {
			if(val > this.max) val = this.max;
			if(val < this.min) val = this.min;
			this.currentValue = val; 
		},
		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;
			}
		}
	},
	mounted() {
			this.updateValue(this.value);
		}
});

var app = new Vue({
	el: '#app',
	data: {
		value: 5
	}
})

老师，这个里面谁是父组件，谁是子组件啊

写回答

2回答