vue的组件学习（重要）

最新推荐文章于 2024-05-15 10:07:30 发布

笔描相思

最新推荐文章于 2024-05-15 10:07:30 发布

阅读量309

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_44788119/article/details/116202051

版权

学习专栏收录该内容

95 篇文章 0 订阅

订阅专栏

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
评论
vue的组件学习（重要）

1:组件的创建分为两种一种是全局组件，一种是局部组件在Vue实例上的叫全局组件：全局组件可以在多个实例中进行使用，但是局部组件只能在声明他的实例中使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"&
复制链接

扫一扫