VUE 04 全局组件,局部组件,组件中的数据, 组件嵌套, 父数据传子,子数据传父

最新推荐文章于 2023-08-25 17:53:50 发布

子非鱼emma

最新推荐文章于 2023-08-25 17:53:50 发布

阅读量172

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_38998319/article/details/117534780

版权

VUE 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

https://baijiahao.baidu.com/s?id=1668458579784282002&wfr=spider&for=pc

1.全局组件的创建

<script type="text/javascript">
	/*	


什么是组件?
扩展html元素,封装可重复的代码(就是把html代码封装起来)

组件分为:
 全局组件:
	定义:定义在vue对象外的组件,可以在任意的对象中使用



	语法格式:
	一,在new Vue对象之前创建组件:
	Vue.component('组件名',{
	 1.template:'html代码' 要封装的html代码
	 或者:
	 2.template:'#id名'
     })

	 二,若template使用ID名,则在body标签后面创建模板
	 注意:模板中只能有一个子元素,元素较多时可用div包裹
		 <body></body>
		 <template id='名'>
			 里面包着大量的html代码
		 </template>
		

	三:如何使用组件:
     在页面上直接使用组件名的方式去使用组件
	 
	   例如:
		<div id="app">

		<组件名></组件名>
		</div>  

	四,运行后页面显示组件中的html代码



	

	注意: 声明全局组件的时候,需要把声明的组件放到new对象之前
	 理解:在得到vue对象之前,把全局组件注册到实例中
*/
</script>

<!DOCTYPE html>
<html>

<head>
	<title></title>
	<meta charset="utf-8" />
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id='app'>
		<!-- 如果定义的时候使用小驼峰命名法,在使用组件的时候,就使用-作为分隔符 -->
		<my-demo></my-demo>
		<my-demo2></my-demo2>

	</div>


	<div id='app2'>
		<my-demo></my-demo>
		<my-demo2></my-demo2>
		<!-- 在两个作用域中都可以使用全局组件 -->
	</div>
</body>

<template id="demo">
	<div>
		<h1>我是template标签中封装的模板</h1>
		<h1>我是template标签中封装的模板</h1>
	</div>
</template>

<template id="demo2">
	<div>
		<ul>
			<li>我是的demo2中的模板内容</li>
			<li>我是的demo2中的模板内容</li>
			<li>我是的demo2中的模板内容</li>
		</ul>
	</div>
</template>





<script>
	Vue.component('myDemo', {
		template: '#demo'
	})
	Vue.component('myDemo2', {
		template: '#demo2'
	})
	new Vue({
		el: '#app',
		data: {

		}
	})
	new Vue({
		el: '#app2',
		data: {

		}
	})
</script>

</html>

2.局部组件


<script>
	/*
	局部组件:
	定义:定义在vue对象中的组件,这种组件只能在当前的new Vue({}) 作用范围内使用
	语法格式:

	一,在new Vue({})中穿件组件
	new Vue({
		el:'#app',
		components:{

			'组件名':{
				template:'html代码'
			},
**************************或
			
			'组件名':{
				template:'#id名'
			}
		}
	})

	二,定义模板(template中只能有一个元素,注意用div包裹起来)
	<body></body>
	<template id='id名'>
		<div>
			大量的html代码
		</div>
	</template>


	三,使用组件
	<div id='app'>
		<组件名></组件名>
	</div>


	四,运行后显示模板中的html代码

*/
</script>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8"/>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<my-demo2></my-demo2>
</div>

<div id='app2'>
	<my-demo2></my-demo2>
	<!-- 
		由于my-demo2组件为app的局部变量
		执行后会报错:
		[Vue warn]: Unknown custom element: <my-demo2>
	 -->
	
</div>
	
</body>
<template id='demo2'>
	<!-- 这是app中---my-demo2的模板 -->
	<div>
		<ul>
			<li>hahahahha</li>
			<li>hahahahha</li>
			<li>hahahahha</li>
			<li>hahahahha</li>
		</ul>
		<h1>再来一个</h1>
	</div>
</template>



<script type="text/javascript">

new Vue({
	el:'#app',
	components:{
		'my-demo':{
			template:'<h1>我是局部组件中的h1</h1>'
		},
		'my-demo2':{
			template:'#demo2'
		}
	}
})


new Vue({
	el:'#app2'
})
</script>
</html>

3.创建组件data

<script>
/*
	在组件中不能直接使用data中的数据,如果需要使用数据,需要自己去组件中定义
	如何在组件中定义数据

	语法格式:

	'组件名':{
		template:'#id名',
		在组件中声明数据,必须是函数,并有返回值,返回值是对象
		data:function(){
			return{
				键:值
			}
		}
	}
*/
</script>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8"/>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<demo></demo>
	</div>
</body>


<!-- demo组件的模板 -->
<template id="demo">
	<div >
		<p>{{str1}}</p>
		<h2>{{num}}</h2>
	</div>
</template>


<script type="text/javascript">
	
	new Vue({
		el:'#app',
		data:{
			str:"字符串"
		},
		// 定义一个局部组件
		components:{
			'demo':{
				template:'#demo',
				data:function(){
					return{
						str1:'我是组件中的data中的数据',
						num:10
					}
				}
			}
		}
	})
</script>
</html>

4.组件中的父子组件

<!DOCTYPE html>
<html>

<head>
	<title>组件中的父子组件</title>
	<meta charset="utf-8" />
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
	<my-parent></my-parent>

    <!-- 
	<my-child2></my-child2>	
	[Vue warn]: Unknown custom element:  <my-child2>
	 -->

	<!-- 
		对于app来说myParent就是它的子元素,
		在父元素中只能写子元素,不能写孙子元素
	-->	

</div>
</body>
<!-- 父组件模板 -->
<template id="demop">
	<div>
		<div>我是父组件中的模板,我自己的数据是:{{str}}</div>
		<my-child1></my-child1><!-- 子组件1 -->
		<my-child2></my-child2>	
	</div>
</template>

<!-- 子组件1模板 -->
<template id='democ1'>
	<div>
		<ul>
			<li>我是子主见的模板内容</li>
			<li>我是子主见的模板内容</li>
			<li>我是子主见的模板内容</li>
			<li>我是子主见的模板内容</li>
		</ul>
		<div>我是子组件中的模板,我自己的数据是:{{str1}}</div>
	</div>
</template>

<!-- 子组件2模板 -->
<template id='democ2'>
	<div>
		<p>我是子组件2的模板内容,我自己的数据是:{{str2}}</p>
	</div>
</template>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {},
		components: {
			'myParent': {
				template: '#demop',
				data: function () {
					return {
						str: '我是父组件中的数据'
					}
				},
				components: {
					'myChild1': {
						template: '#democ1',
						data() {
							return {
								str1: '我是子组件1的数据'
							}
						},
					},
					'myChild2': {
						template: '#democ2',
						data() {
							return {
								str2: '我是子组件2中的数据'
							}
						},
					}
				},

			}
		}

	})
</script>

</html>

5.父组件传值----给子组件

<script>
	/*
		父组件传值子组件
		1.父组件传值--给子组件需要自定义属性,

			子组件使用自定义属性来绑定需要传递组件内的变量
		2.在子组件中使用props接收传递进来的值(:自定义属性='父组件的数据')


		语法格式:
    一,在父模板中通过子组件创建自定义属性,绑定要传递的值    
			<template id='父组件模板'>
				{{父组件的数据}}
				<子组件:自定义属性='父组件数据'></子组件>
			<template>

	二,在子组件中接收传递的值

			components:{
				'组件名':{
					props:{
						自定义属性名:{
							type:接数据的类型,
							defaule
						}
					}
				}
			}
    三,使用:在子组件中即可使用自定义属性名(表示父组件的元素)
			<template id='子组件模板'>
				{{子组件的数据}} √
				{{父组件的数据}} X
				{{自定义属性名}} √		
			<template>

	四:输出:输出后一中的子组件效果被父组件调用后可显示自定义属性的值
	<div id="app">
		<my-parent></my-parent>
	</div>		
*/
</script>

<!DOCTYPE html>
<html>

<head>
	<title>组件传值-(父传子)</title>
	<meta charset="utf-8" />
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		<my-parent></my-parent>
	</div>
</body>

<!-- 父组件的模板 -->
<template id='demo1'>
	<div>
		{{pstr}}
		<my-child :mystr='pstr'></my-child>
	</div>
</template>

<!-- 子组件的模板 -->
<template id='demo2'>
	<div>
		{{cstr}}
		{{mystr}}
	</div>
</template>



<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {},
		components: {
			'myParent': {
				template: '#demo1',
				data: function () {
					return {
						pstr: '*****我是父组件中的数据********'
					}
				},
				components: {
					'myChild': {
						// 用于接收传递的值
						props: {
							// 在使用的时候,需要使用mystr作为数据源(父组件传递进来的数据)即可

							mystr: {
								// 里边存储的值就是:mystr属性传递进来的值
								// 指定接收数据的类型
								type: String,
								default: ''
							}
						},
						template: '#demo2',
						data: function () {
							return {
								cstr: '####我是子子子组件中的数据####'
							}
						}
					}
				}
			}
		}
	})
</script>

</html>

6.子组件传值给父组件

<script>
	/*
	一,在子模板中添加按钮创造契机
	<button @click='sendColor()'>变颜色</button>

	二,在子组件中的methods中创建方法
	methods: {
					sendColor() {						
						// 需要使用自定义事件帮我们将组件的数据传递出去
						// this.$emit('自定义事件名','你要发出去的数据')
						this.$emit('changecolor', this.color)
					}
				},

	三,在vue作用范围中的--子组件中添加事件(事件类型为二中的自定义事件名)
	<div id="app">
		<p :style="{'color':color}">点击按钮就变颜色噢</p>
		<!-- 该事件会在组件模板渲染的时候自动调用 -->
		<my-demo @changecolor='cColor'></my-demo>
	</div>


	四,使用:在父元素的methods中创建自定义事件的方法,方法中的参数为子组件传入的值(red)
	methods: {
			cColor(v) {
				console.log(v);
				this.color = v;
			}
		},

	*/
</script>

<!DOCTYPE html>
<html>

<head>
	<title>组件传值-(子传父)</title>
	<meta charset="utf-8" />
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		<p :style="{'color':color}">点击按钮就变颜色噢</p>
		<!-- 该事件会在组件模板渲染的时候自动调用 -->
		<my-demo @changecolor='cColor'></my-demo>
	</div>

</body>

<!-- 子模板(相对于vue对象) -->
<template id="demo">
	<div>
		<!-- 在组件传值给父组件,需要有契机 -->
		<!-- 在组件中触发事件后调用方法,需要在组件中声明 -->
		<button @click='sendColor()'>变颜色</button>
		子组件中的颜色:{{color}}
	</div>
</template>

<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			color: '#7bb707'
		},
		methods: {
			cColor(v) {
				console.log(v);
				this.color = v;
			}
		},
		components: {
			'myDemo': {
				template: '#demo',
				data: function () {
					return {
						color: 'red'
					}
				},
				methods: {
					sendColor() {
						// alert(123);
						// 获取到中间的数据
						// alert(this.color);
						// 需要使用自定义事件ba帮我们将组件的数据传递出去
						// this.$emit('自定义事件名','你要发出去的数据')
						this.$emit('changecolor', this.color)
					}
				},

			}
		}
	})
</script>

</html>

点击按钮,父中颜色变成子中红色

子非鱼emma

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE 04 全局组件,局部组件,组件中的数据, 组件嵌套, 父数据传子,子数据传父

1.全局组件的创建<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8" />  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head>&
复制链接

扫一扫