vue组件学习

2023-10-02 17:27:22

一.文章导读

前面学习了vue的基础指令，了解了相关的钩子函数，这一章学习vue的组件，组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码，组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

菜鸟教程地址：https://www.runoob.com/vue2/vue-tutorial.html

官网学习地址：https://cn.vuejs.org/

入门学习更加推荐菜鸟

二.组件定义

1.全局组件

<body>
		<!-- 创建两个承载容器 -->
		<div id="app">
			<my-fristcomponent></my-fristcomponent>
		</div>

		<div id="app1">
			<!-- 在视图层 直接写组件的标签名就可以调用全局组件 -->
			<my-fristcomponent></my-fristcomponent>
		</div>
		<!-- 
			值得注意的点是 在js中定义了Vue全局组件在视图层中我们的全局组件必须在创建实例的块中使用
		 -->
		<!-- 如下，app2我们没有绑定vue实例所以组件不会生效-->
		<div id="app2">
			<my-fristcomponent></my-fristcomponent>
		</div>
		<my-fristcomponent></my-fristcomponent>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 
				自定义全局组件  my-fristcomponent是自定义组件的标签名
				template是模板的意思，后面写组件的内容
			 */
			Vue.component('my-fristcomponent', {
				template: "<p>我的第一个组件</p>"
			});
			/* 
				创建 两个vue实例
			 */
			new Vue({
				el: "#app"
			});
			new Vue({
				el: "#app1"
			})
		</script>
	</body>

2.组件驼峰命名

<body>
		<div id="app">
			<!-- 
				在使用组件，如果使用驼峰命名,vue会自动解析，我们
				调用时需要用-隔开并使用小写,如下两种方式是可以
			 -->
			<Hello-world></Hello-world>
			<hello-world></hello-world>
			<!-- 错误 -->
			<HelloWorld></HelloWorld>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 在创建实例时,我们遵循驼峰命名法 */
			Vue.component('HelloWorld', {
				template: "<p>HelloWorld</p>"
			})

			new Vue({
				el: "#app",
			})
		</script>
	</body>

3.组件data数据

<body>
		<div id="app">
			<data-component></data-component>
			<button @click="change">改变</button>
			{{msg}}
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component("dataComponent", {
				/* 
					在定义组件时也可以写data,但是data里面必须是一个函数
					且这个函数必须有返回值
				*/
				data: function() {
					return {
						msg: "data返回值"
					}
				},
				// 组件中的msg 只可以在该模板中使用
				template: '<p >{{msg}}</p>'
			})

			new Vue({
				el: "#app",
				data: {
					msg: "121"
				}, 
				methods: {
					// 定义change返回无法改变组件中的
					change: function() {
						// alert(11);
						this.msg = "1212";
					}
				}
			})
		</script>
	</body>

4.局部组件

前面已经写个全局指令，全局过滤器，局部过滤器之类的，所以局部组件与全局组件的区别是一样的，局部组件只能在当前实例才能使用

<body>
		<div id="app">
			<my-component></my-component>
		</div>
		<div id="app1">
			// my-component组件注册不正确 局部组件不能在其他实例中使用
			<my-component></my-component> 
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
			/* 	data: {
					msg: "局部指令",
				}, */
				components:{
					'my-component':{
						data:function(){
							return{
								msg:"局部指令"
							}
						},
						template:"<p>{{msg}}</p>"
					}
				}
			});
				new Vue({
					el:"#app1"
				})
		</script>
	</body>

注意：组件模板中的内容只允许存在一个根标签，多了的话只会解析第一个

	// 下面模板定义了两个p标签，相当于两个根标签，那么第二个就不会生效
	template: '<p >{{msg}}</p> <p>{{msg}}</p>

三.组件之间的传值

1.父组件向子组件传值

父组件发送的形式是以属性的形式绑定值到子组件身上。
然后子组件用属性props接收
在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

<body>
		<div id="app">
			<p>实例中定义的属性内容是: {{pmsg}}</p>
			#### 下面是组件
			<!-- 
				:content 等同于v-bind:content
				浏览器打印结果：
				我是定义的组件内容
				我是标题
				父组件内容
			 -->
			<!-- 
				组件定义的模板中使用的值带有props的属性，在视图层使用v-bind绑定
				父组件的数据从而形成赋值，也可以不绑定直接赋值
				eg：<menu-item title="我自动赋值" content="我自动赋值内容"></menu-item>
			 -->
			<menu-item v-bind:title="ptitle" :content="pmsg"></menu-item>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// menu-item 定义全局组件
			Vue.component('menu-item', {
				// 组件 用props 属性来接受父组件传递的参数
				props: ['title', 'content'],
				//组件中 的data必须是函数，且有返回值
				data: function() {
					return {
						msg: "我是定义的组件内容",
						title: "我是定义的组件的标题"
					}
				},
				// 定义组件模版
				template: '<p><span>{{msg}}</span><br><span>{{title}}</span><br><span>{{content}}</span></p>'
			});
			new Vue({
				el: "#app",
				data: {
					pmsg: "父组件内容",
					ptitle: "我是标题"
				}
			});
		</script>
	</body>

2.子组件向父组件传值

子组件用$emit()触发事件
$emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据
父组件用v-on 监听子组件的事件

<body>
		<div id="app">
			<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
			<!-- 2 父组件用v-on 监听子组件的事件
				这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	
			-->
			<menu-item :parr='parr' @enlarge-text='handle($event)' @shrink-text='shrink($event)'
				@gain-num="gainNume($event)"
			></menu-item>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
		      子组件向父组件传值-携带参数
		    */

			Vue.component('menu-item', {
				props: ['parr'],
	/* 			data: function() {
					return {
						num: 0,
					}
				}, */
				template: `
		        <div>
		          <ul>
		            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
		          </ul>
					###  1、子组件用$emit()触发事件
					### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
					<br>
				  <button @click='$emit("gain-num", 0)'>将子组件的值传递到父组件</button>
		          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
		          <button @click='$emit("shrink-text", 5)'>缩小父组件中字体大小</button>
		        </div>
		      `
			});
			var vm = new Vue({
				el: '#app',
				data: {
					pmsg: '父组件中内容',
					parr: ['apple', 'orange', 'banana'],
					fontSize: 10
				},
				methods: {
					handle: function(val) {
						alert(val)
						// 扩大字体大小
						this.fontSize += val;
					},
					shrink: function(val) {
						// 缩小 字体大小
						this.fontSize -= val;
					},
					gainNume: function(val){
						alert(val);
					}
				}
			});
		</script>
	</body>

3.兄弟组件的传递

兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
- 提供事件中心 var hub = new Vue()
传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名
销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

简单想象一下兄弟组件,在全局组件中，定义两个全局组件那么这两个组件就是兄弟组件，局部组件也是一样的，在当个实例中可定义多个局部组件组件之间就是兄弟关系

<body>
		<div id="app">
			<div>父组件</div>
			<div>
				<button @click='handle'>销毁事件</button>
			</div>
			<test-tom></test-tom>
			<test-jerry></test-jerry>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
		      兄弟组件之间数据传递
		    */
			//1、 提供事件中心
			var hub = new Vue();

			Vue.component('test-tom', {
				data: function() {
					return {
						num: 0
					}
				},
				template: `
		        <div>
		          <div>TOM:{{num}}</div>
		          <div>
		            <button @click='handle'>点击</button>
		          </div>
		        </div>
		      `,
				methods: {
					handle: function() {
						//2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
						hub.$emit('jerry-event', 2);
					}
				},
				mounted: function() {
					// 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
					hub.$on('tom-event', (val) => {
						this.num += val;
					});
				}
			});
			Vue.component('test-jerry', {
				data: function() {
					return {
						num: 0
					}
				},
				template: `
		        <div>
		          <div>JERRY:{{num}}</div>
		          <div>
		            <button @click='handle'>点击</button>
		          </div>
		        </div>
		      `,
				methods: {
					handle: function() {
						//2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
						hub.$emit('tom-event', 1);
					}
				},
				mounted: function() {
					// 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
					hub.$on('jerry-event', (val) => {
						this.num += val;
					});
				}
			});
			
			var vm = new Vue({
				el: '#app',
				data: {

				},
				methods: {
					handle: function() {
						//4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
						hub.$off('tom-event');
						hub.$off('jerry-event');
					}
				}
			});
		</script>
	</body>

4.自定义轮播组件

四.组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
插槽标签指令
在组件的基础上的一个标签

1.匿名插槽

没有被name属性修饰的插槽叫匿名插槽

<body>
		<div id="app">
			<alert-box></alert-box>
			<!-- 插槽相当于一个默认的占位符,如果没有去修饰值修饰它,它会以默认值展现 -->
			<alert-box1>{{msg}}</alert-box1>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component("alert-box", {
				template: `
					<div>
						###在组件模板中定一个插槽<br>
						<slot>我是一个插槽</slot>
					</div>
				`
			})
			Vue.component("alert-box1", {
				template: `
					<div>
						###虽然我也是一个插槽但是我被占用了<br>
						<slot>我是一个插槽</slot>
					</div>
				`
			})

			new Vue({
				el: "#app",
				data: {
					msg:"我要占用插槽"
				}
			});
		</script>
	</body>

2.具名插槽

被name属性修饰的插槽叫具名插槽

<body>
		<div id="app">
			<table-list>
				<!-- 在模板内分别为两个插槽填充数据 达到表格效果 -->
				<template slot='heands'>
					<th>ID</th>
					<th>名称</th>
				</template>
				<template slot='tablebody'>
					<tr v-for="l in list">
						<td>{{l.id}}</td>
						<td>{{l.name}}</td>
					</tr>
				</template>
			</table-list>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 定义一个 table 组件 
			Vue.component('table-list', {
				// 定义一个模板，定义两个插槽heands 和 tablebody
				template: `
					<table>
						<tr>
						   <slot name='heands'></slot> 
						</tr>
						<tbody>
							 <slot name="tablebody"></slot> 
						</tbody>
					</table>
				`
			})
			new Vue({
				el: "#app",
				data: {
					// 准备初始化数据
					list: [{
							id: 1,
							name: '李四'
						},
						{
							id: 2,
							name: '张三'
						},
						{
							id: 3,
							name: '张飞'
						},
					]
				}
			})
		</script>
	</body>

3.作用域插槽

父组件对子组件加工处理
既可以复用子组件的slot，又可以使slot内容不一致

<body>
		<div id="app">
			<!-- 
				1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
				但样式希望不一样 这个时候我们需要使用作用域插槽 
				
			-->
			<fruit-list :list='list'>
				<!-- 2、 父组件中使用了<template>元素,而且包含scope="slotProps",
					slotProps在这里只是临时变量   
				--->
				<template slot-scope='slotProps'>
					<strong v-if='slotProps.info.id==3' class="current">
						{{slotProps.info.name}}
					</strong>
					<span v-else>{{slotProps.info.name}}</span>
				</template>
			</fruit-list>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
		      作用域插槽
		    */
			Vue.component('fruit-list', {
				props: ['list'],
				/* 
				   3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
				   插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
				 		如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
				 */
				template: `
		        <div>
		          <li :key='item.id' v-for='item in list'>
		            <slot :info='item'>{{item.name}}</slot>
		          </li>
		        </div>
		      `
			});
			var vm = new Vue({
				el: '#app',
				data: {
					list: [{
						id: 1,
						name: 'apple'
					}, {
						id: 2,
						name: 'orange'
					}, {
						id: 3,
						name: 'banana'
					}]
				}
			});
		</script>
	</body>

五.习题练习

1.定义轮播组件

<html>
	<head>
		<meta charset="utf-8">
		<title>自定义轮播组件</title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		#slideshow {
			width: 800px;
			height: 400px;
			margin: 50px auto;
			border: 1px solid black;
			position: relative;
		}
	</style>
	<body>
		<div id="slideshow">
			<slides-show :images="images" :index="index" :img-style="imgStyle" :show="show" :hide="hide" :prepagestye="prepagestye"
			 :nextpagestye="nextpagestye" :slideshowstyle="slideshowstyle"
			 @prepage='prepage' @nextpage='nextpage'
			 >

			</slides-show>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component("slides-show", {
				props: ['images', 'index', 'slideshowstyle', 'imgStyle', 'show', 'hide',
					'prepagestye', 'nextpagestye'
				],
				template: `
				<div :style="[slideshowstyle]">
					<ul v-for="imgs in images" class="slideTable">
						<li v-if="index === imgs.id" :style="[show]">
							<img :src="imgs.path" :style="[imgStyle]">
						</li>
						<li v-else :style="[hide]">
							<img :src="imgs.path" >
						</li>
					</ul>
					<span :style="[prepagestye]" @click='$emit("prepage")'>
						<img src = "img/上一页.png" width="30px">
					</span>
					<span :style="[nextpagestye]"  @click='$emit("nextpage")'>
						<img src = "img/上一页.png" width="30px">
					</span>
				</div>
				`
			})
			new Vue({
				// 绑定父元素
				el: "#slideshow",
				data: {
					// 定义轮播图片数据
					index: 1,
					images: [{
							id: 1,
							path: 'img/3Dbg01.jpg'
						},
						{
							id: 2,
							path: 'img/3Dbg02.jpg'
						},
						{
							id: 3,
							path: 'img/3Dbg03.jpg'
						},
						{
							id: 4,
							path: 'img/3Dbg04.jpg'
						}
					],
					// 隐藏显现
					hide: {
						display: 'none'
					},
					show: {
						display: 'inline'
					},
					//定义图片大小
					imgStyle: {
						width: '100%',
						height: '400px'
					},
					// 上一页
					prepagestye: {
						width: '35px',
						position: 'absolute',
						top: '190px',
						display: 'inline-block',
						left: '8px',
						cursor: 'pointer',
					},
					// 下一页
					nextpagestye: {
						width: '35px',
						position: 'absolute',
						top: '190px',
						right: '8px',
						cursor: 'pointer',
						display: 'inline-block',
						transform: ' rotate(180deg)',
					},
					slideshowstyle: {
						position: 'relative',
						width: '100%',
						height: '400px'
					}
				},
				methods: {
					prepage: function() {
						console.log('11')
						if(this.index <= 1){
							this.index = this.images.length;
						}else{
							this.index = this.index-1;
						}
					},
					nextpage: function() {
						console.log('2')
						if (this.index >= this.images.length) {
							this.index = 1;
						} else {
							this.index = this.index + 1;
						}
					}
				}
			})
		</script>
		<!-- <style type="text/css">
			.slideshowStyele {
				position: relative;
				text-align: center;
				background-color: #fff;
				list-style: none;
				width: 100%;
				height: auto;
				width: 30px;
				height: 30px;
				transform: rotate(180deg);
				cursor: pointer;
				display: inline-block;
			}
		</style> -->
	</body>
</html>

2.dmoe下载

https://gitee.com/li_shang_shan/vue-component-learning-dmeo

码农公寓