自定义组件问题

自定义组件问题

<!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
	}
})

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

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2018-12-03 11:30:38

你好,是的哦,课程中也有使用到,建议:同学也可以看下课程中的哦。

祝学习愉快!

好帮手慕糖 2018-12-03 09:57:38

同学你好,这个代码不全,不知道那个是被引入的,无法判断那个是父组件。引入其他组件的是父组件,被引入的组件是子组件;

希望能帮助到你,祝学习愉快!

  • 是要用import关键字引入吗?在哪个组件中引入哪个就是父组件,被引入的组件就是子组件,老师是这个意思吗?
    2018-12-03 11:05:10
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师