Vue学习第四天（组件的相关操作）

最新推荐文章于 2021-11-19 11:03:23 发布

zzuli_xiaomingke

最新推荐文章于 2021-11-19 11:03:23 发布

阅读量168

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/zzuli_xiaomingke/article/details/104201416

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue学习第四天（组件的相关功能）
，今天写了两个博文，第一篇补上了昨天的知识点，这一篇简单总结下，今天的学习内容，今天主要学习了vue中的组件的概念，说起组件化的创作理念，就要在提一提我们之前的分层概念，也就是模块化思想，这种思想在后端代码中很常见

模块化，将每一层的代码功能细化
组件化，按照前台的网页结构进行的网页拆分
下面简单写一下，vue中组件究竟是如何使用的吧
第一种方法，我们先进行继承模板的制作，在此基础上进行容器的制作

var com1 = Vue.extend({
			   //模板即我们要渲染的html结构
			   template: '<h3>我的一个道姑朋友</h3>'
		   })
		   //如果此处使用了驼峰命名，我们在页面使用时应该去掉驼峰加上-
		   Vue.component('mycpm1', com1)

不难看出，在继承模板中，我们定义了一个属性template，这个属性，我们在后面会经常提到，这是当前组件的html结构，在得到这个继承模板以后，我们在使用vue的内置方法制作组件，组件名为mycpm1，继承自模板com1,在使用时，我们只需要将标签放入到网页中即可

<div id="app1">
	<mycpm1></mycpm1>
</div>

挺简单的吧
下面介绍第二种方式创建实例，我们将使用更简洁的方式，那就是，将两步合成一步

Vue.component('mycpm3', {
			   template:'#emp1'
		   })

不难看到，此时的template属性后面跟上了一个选择器，我们在网页上新建一个template标签，让他的id等于emp1,然后就能调用了

<template  id="emp1">
			<div>
				<input type="text" name="" id="" value="" />
				<button type="button">戳我</button>
			</div>
		</template>

这里顺便提一下，我们的组件理论上只能有一个根，即根元素是单一的，否则，vue会报错，上面这种定义方法，和第一种的调用方法，完全一致
另外，对于组件而言，她也有自己的数据，但是这里的data，不再是一个属性，而是一个方法，为的是，多个实例使用同一个模板时，它们之间的数据不会混乱，就像这样

var vue = new Vue({
			   el:'#app1',
			   data:{
				   
			   },
			   methods:{
				   
			   },
			   components:{
				   //可以自定义一个私有化的组件，仅供当前vue实例使用
				   login:{
					   template:'<h3>误杀</h3>'
				   },
				   //也可以在组件中定义一个data方法，用于处理个性化的数据
				   mytext:{
					   template:'<h3>南朝四百八十寺，多少楼台烟雨中-->{{msg}}</h3>',
					   data:function(){
						   return {
							   msg:"金光闪闪的五个字"
						   }
					   }
				   }
			   }
		   })

而且，我们还可以在组件中带哦用，我们的数据，可以直接使用插值表达式的方式进行操作
对于昨天的动画效果，我们也可以搬到组件中来使用，同样，我们首先要把使用动画的html结构使用标签包裹住，就像下面这样

<div id="app4">
			<button v-on:click="denglu">登陆</button>
			<button v-on:click="zhuce">注册</button>
			<!--可以使用v-bind:is指定不同的组件id，用一个元素，切换两个不同组件-->
			<!--通过mode属性控制组件切换，先出后进，不会冲突-->
			<transition mode="out-in">
				<component v-bind:is="com1"></component>
			</transition>
		</div>

这个组件这里，还是用了一个新的知识点，那就是v-bind:is，这里是我们为当前组件绑定了一个组件，细心的读者可能已经发现，我们使用的标签是通配标签，也就是说，这个地方可以是任何我们定义过的组件，此时，这个地方是什么标签取决于com1的值。我们不妨在vue实例中定义一个数据com1,在定义一个函数，用来切换com1的值，就能使用一个标签完成两个标签的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页</title>
		<script src="js/vue.js" type="text/javascript"></script>
		<style>
			
			.v-enter{
				opacity: 0;
				transform: translateZ(150px);
			}
			.v-leave-to{
				opacity: 0;
				transform: translateX(150px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition: all 0.6s ease;
			}
		</style>
	</head>
	<body>
		<div id="app3">
			<button v-on:click="denglu">登陆</button>
			<button v-on:click="zhuce">注册</button>
			<login v-if="flag"></login>
			<register v-else="flag"></register>
		</div>
		<div>-----------------------------------------------</div>
		<div id="app4">
			<button v-on:click="denglu">登陆</button>
			<button v-on:click="zhuce">注册</button>
			<!--可以使用v-bind:is指定不同的组件id，用一个元素，切换两个不同组件-->
			<!--通过mode属性控制组件切换，先出后进，不会冲突-->
			<transition mode="out-in">
				<component v-bind:is="com1"></component>
			</transition>
		</div>
		<template id="emp1">
			<h2>我的是登录页</h2>
		</template>
		<template id="emp2">
			<h2>先生需要注册哦</h2>
		</template>
		<script>
			var vue = new Vue({
				el:'#app3',
				data:{
					flag:true
				},
				methods:{
					denglu:function(){
						this.flag = true
					},
					zhuce:function(){
						this.flag = false
					}
				},
				components:{
					login:{
						template:'#emp1'
					},
					register:{
						template:'#emp2'
					}
				}
			})
			var vue1 = new Vue({
				el:'#app4',
				data:{
					com1:"login"
				},
				methods:{
					denglu:function(){
						this.com1 = "login"
					},
					zhuce:function(){
						this.com1 = "register"
					}
				},
				components:{
					login:{
						template:'#emp1'
					},
					register:{
						template:'#emp2'
					}
				}
			})
		</script>
	</body>
</html>

最后，我们讲一些父子标签的问题，在子标签中，我们可以使用父组件中的数据和函数，不过要通过一些特殊的方式，当我们要使用数据时，我们需要三步

在引用时使用v-bind:xxx=“data”,将数据传送过来
在组件中使用props接受一下绑定的属性
在组件模板中使用即可，但是传递过来的数据都是只读的
在html中

<div id="app1">
			<!--在组件上绑定函数，用来传递实例的方法给组件-->
			<login v-bind:pmsg="msg" v-on:fun="show"></login>
		</div>
		<template id="emp1">
			<div>
				<h3>{{pmsg}}, 牧童遥指杏花村<h3>
				<button v-on:click="push">push</button>
			</div>
		</template>

在VUE实例中

var vue = new Vue({
				el:'#app1',
				data:{
					msg:"借问酒家何处有"
				},
				methods:{
					show:function(){
						console.log("我是父容器的一个方法，我会输出666");
					}
				},
				components:{
					//理论上，私有组件无法访问到所在实例的内容
					//但是我们可以通过属性绑定的方式，将数据传递过来
					//1. 在引用时使用v-bind:xxx="data",将数据传送过来
					//2. 在组件中使用props接受一下绑定的属性
					//3. 在组件模板中使用即可，但是传递过来的数据都是只读的
					login:{
						template:'#emp1',
						props:['pmsg'],
						methods:{
							push:function(){
								//在组件自身的方法中，我们可以调用传入的方法
								//不过必须使用this.$emit触发
								this.$emit('fun')
							}
						}
					}
				}
			})

使用父组件的方法，则需要先进行事件绑定，在使用组件内置的方法this.$emit(‘方法名’)即可调用
希望生活早日恢复正轨，为之则易，不为则难

zzuli_xiaomingke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习第四天（组件的相关操作）

Vue学习第四天（组件的相关功能），今天写了两个博文，第一篇补上了昨天的知识点，这一篇简单总结下，今天的学习内容，今天主要学习了vue中的组件的概念，说起组件化的创作理念，就要在提一提我们之前的分层概念，也就是模块化思想，这种思想在后端代码中很常见模块化，将每一层的代码功能细化组件化，按照前台的网页结构进行的网页拆分下面简单写一下，vue中组件究竟是如何使用的吧第一种方法，我们先进行继...
复制链接

扫一扫

专栏目录