vue的组件学习(重要)

1:组件的创建分为两种一种是全局组件,一种是局部组件
在Vue实例上的叫全局组件:

全局组件可以在多个实例中进行使用,但是局部组件只能在声明他的实例中使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
		 <cpn1></cpn1>
		 <cpn1></cpn1>
		</div>
	</body>
	<template id="cpn">
		<div>
		<button @click="up">+</button>
		<diV>{{count}}</diV>
		<button @click="dom">-</button>
		</div>
	</template>
</html>
<script>
	Vue.component('cpn1',{
		template:'#cpn',
		data(){
			return{
				count:0
			}
		},
		methods:{
			up()
			{
				this.count++;
			},
			dom()
			{
				this.count--;
			}
		}
	})
	new Vue({
		el:'#app',
		data:{
			
		},
		methods:{
			
		}
	})
</script>

在Vue的实例对象上面定义的组件为局部组件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
			<cpn1></cpn1>
			<cpn1></cpn1>
		</div>
	</body>
	<template id="cpn">
		<div>
			<button @click="up">+</button>
			<diV>{{count}}</diV>
			<button @click="dom">-</button>
		</div>
	</template>
</html>
<script>
	
	new Vue({
		el: '#app',
		data: {

		},
		methods: {

		},
		components: {
			'cpn1': {
				template: '#cpn',
				data() {
					return {
						count: 0
					}
				},
				methods: {
					up() {
						this.count++;
					},
					dom() {
						this.count--;
					}
				}
			}
		}
	
	})
</script>

2:模板的分离有两种
在这里插入图片描述
3:为什么在要使用data函数?
每个组件都有属于自己的方法,钩子函数,数据,组件是不能直接访问实例对象中的data的数据的,他必须有一个data函数,并且这个函数返回的是一个对象,对象内部保存的是数据。
至于为什么使用data函数是因为每一个组件都有自己的实例空间,使用data函数就可以解决这个问题,不用data函数的话,就会让所有的实例指向同一个data数据。

4:组件的传通信
父子组件的通信两种方式:
1:父组件传给子组件,props不支持驼峰
(1)通过数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
			<cpn1 :covice="covice" :message="message"></cpn1>
		</div>
	</body>
	<template id="cpn">
		<div>
			<ul>
				<li v-for="iterm in covice">{{iterm}}</li>
			</ul>
			<div>
				{{message}}
			</div>
		</div>
	</template>
</html>
<script>
	new Vue({
		el: '#app',
		data: {
			covice:['小红','小明','小春','小华'],
			message:"caiyun"
		},
		methods: {
         
		},

		components: {
			'cpn1': {
				template: '#cpn',
				data() {
					return {
						count: 0
					}
				},
				methods: {

				},
				props: ['covice', 'message']
			}
		}

	})
</script>

(2)通过对象,指定类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
			<cpn1 :covice="covice" :message="message"></cpn1>
		</div>
	</body>
	<template id="cpn">
		<div>
			<ul>
				<li v-for="iterm in covice">{{iterm}}</li>
			</ul>
			<div>
				{{message}}
			</div>
		</div>
	</template>
</html>
<script>
	new Vue({
		el: '#app',
		data: {
			covice:['小红','小明','小春','小华'],
			message:"caiyun"
		},
		methods: {
         
		},

		components: {
			'cpn1': {
				template: '#cpn',
				data() {
					return {
						count: 0
					}
				},
				methods: {

				},
				props: 
				{
				'covice':Array, 
				'message':String	
				}
			}
		}

	})
</script>

(3)通过对象指定参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
			<cpn1 ></cpn1>
		</div>
	</body>
	<template id="cpn">
		<div>
			<ul>
				<li v-for="iterm in covice">{{iterm}}</li>
			</ul>
			<div>
				{{message}}
			</div>
		</div>
	</template>
</html>
<script>
	new Vue({
		el: '#app',
		data: {
			covice:['小红','小明','小春','小华'],
			message:"caiyun"
		},
		methods: {
         
		},

		components: {
			'cpn1': {
				template: '#cpn',
				data() {
					return {
						count: 0
					}
				},
				methods: {

				},
				props: 
				{
				'covice':{
					type:Array,
					default(){
						return ["hah","www",'ett']
					}
					}, 
				'message':{
					type:String,
					default:"小明",
					//表示必须传值过来
					required:true
				}	
				}
			}
		}

	})
</script>

2:子组件通过事件传给父组件
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
			<cpn1 :once="once" @itemclick="clickitem"></cpn1>
		</div>
	</body>
	<template id="cpn">
		<div>
			<div v-for="intem in once"><button @click="hom(intem)"></button></div>
		</div>
	</template>
</html>
<script>
	new Vue({
		el: '#app',
		data: {
		 once:[{"id":1,"type":"电器"},{"id":2,"type":"电话"},{"id":3,"type":"电话2"},{"id":4,"type":"电话3"}]
		},
		methods: {
         clickitem(item)
		 {
			 console.log("clickitem",item);
		 }
		},

		components: {
			'cpn1': {
				template: '#cpn',
				data() {
					return {
						count: 0
					}
				},
				methods: {
                 hom(iterm)
				 {
					 this.$emit("itemclick",iterm);
				 }
				},
				props:['once']
			}
		}

	})
</script>

第二种传递方式:
在这里插入图片描述

1:可以直接通过this.$children获取所有的子组件的对象。
2:可以在子组件上面设置一个ref的属性,给他组件取个名字,通过this . $refs.组件的名字获取这个组件的对象

子访问父组件:
访问父组件
1:直接在子组件的方法中通过this.$parent(用的比较少,复用性不高)
访问根组件
2:this. $root

5:solt
在这里插入图片描述
使用直接通过在子组件中添加数据,然后通过插槽显示,这样可以实现把相同的东西提取出来,不相同的东西放到插槽里面。
在这里插入图片描述
在这里插入图片描述
具名的插槽:替换某个指定名字的插槽
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值