Vue2.0 组件components

最新推荐文章于 2025-05-14 10:44:40 发布

原创最新推荐文章于 2025-05-14 10:44:40 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在Vue.js中如何定义、注册和使用自定义组件，通过实例展示了组件传参、父子数据交互的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

案例思路：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../components/step.js"></script>
	</head> 
	<body>
		<div id="app">
			<!-- 03 使用组件 -->
			<h1>组件传参</h1>
			<p>父传子</p>
			<!-- <step v-model="r"></step> -->
			<step :value="r" @input="r=$event" :min="100" :max="500" :step="10"></step><br>
			<input type="range" :min="100" :max="500" v-model.number="r">
			<div :style="{'border':'2px solid red',borderRadius:r+'px',height:r+'px',width:r+'px'}"></div>
		</div>
		<script>
			 new Vue({
				 el:"#app",
				 // 02注册组件
				 components:{step},
				 data(){
					 return{
						 r:100,
					 }
				 }
			 })
		</script>
	</body>
</html>

// 01定义组件
var step = {
	template: `<span>
				 <button @click="count-=step" :disabled="count<=min">-</button>
				 <input type="text" v-model.lazy.number="count"/>
				 <button @click="count+=step" :disabled="count>=max">+</button>
				 </span>`,
	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的数据局发生变化时通知父组件更新数据