vue学习笔记-- component组件的使用和传值

最新推荐文章于 2024-08-29 10:13:04 发布
最新推荐文章于 2024-08-29 10:13:04 发布
阅读量1.5w 收藏 3
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/watson_pillow/article/details/109600259
版权

定义

为了拆分vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来需要功能，就可以去调用对应的组件；

组件化和模块化的区别：
1、模块化：是从代码逻辑的角度进行划分的；
2、组件化：是从UI界面的角度进行划分的；方便ui组件的重用；

方式1

使用过程：

  1. 使用vue.extend 来创建全局的vue组件（通过template属性，指定了组件要展示的html结构）
  2. 使用vue.component(‘组件的名称’,创建出来的组件模板对象)
  3. 使用组件，以html标签的的形式，引入到页面中(如果模板的命名为驼峰方式，在使用时需要修改为-连接；如myCom my-com)；
<body>
	<div class = "app ">
		<m_com></m_com>
	</div>
</body>

<script type="text/javascript">
	var com1 = Vue.extend({
		template:'<h3>h3模板组件</h3>'
	})
	Vue.component('m_com',com1);

	var vm = new Vue({
		el:'.app'
	})
</script>

同样可以将定义的两步合并：

	Vue.component('m_com',Vue.extend({
		template:'<h3>h3模板组件</h3>'
	}));
	//第一个参数，引用的标签的名称
	//第二个参数，创建的组件，

方式2

以上形式的缩略：

Vue.component('m_com',{
	template:'<h3>h3模板组件</h3>'
});

注意：
根元素必须只有一个：

Vue.component('m_com',{
	template:'<div><h3>h3模板组件</h3><h2>h2</h2></div>'
});

最外层的div如果舍弃的话，将会报错

方式3

在被控制的app的外面 使用template元素，定义组件的模板结构

<body>
	<div class = "app ">
		<m_com></m_com>
	</div>
	<template id="temp1">
		<div>
			<h1>外围定义的组件结构</h1>
			<h2>可以使用</h2>
		</div>
	</template>

</body>

<script type="text/javascript">
	Vue.component('m_com',{
		template:'#temp1'
	});
	var vm = new Vue({
		el:'.app'
	})
</script>

私有组件

在vue实例内部定义私有组件

	var vm = new Vue({
		el:'.app',
		components:{
			//定义实例内部私有组件
			com4:{
				template:'<h1>私有组件</h1>'
			}
		}
	})

template的值同样也可以是在app实例外部的template标签的id。

组件中的数据

  1. 组件可以有自己的data数据
  2. 组件中的data不能为对象，必须为一个方法
  3. 组件中的data必须返回一个对象
  4. 组件中的数据使用方式和实例中的一样
<body>
	<div class = "app ">
		<m_com></m_com>
	</div>
	<template id="temp1">
		<div>
			<h1>外围定义的组件结构</h1>
			<h2>{{msg}}</h2>
		</div>
	</template>
</body>

<script type="text/javascript">
	Vue.component('m_com',{
		template:'#temp1',
		data:function(){
			return {
				msg:"组件中的data"
			}
		}
	});
	var vm = new Vue({
		el:'.app',
	})
</script>

data中数据为了不影响其他组件使用的对象数据，所以将数据以函数返回对象的方式实现。
例如计数组件：

	<template id="count">
		<div>
			<input type="button" value="+1" @click="increace" name="">
			<h2>{{count}}</h2>
		</div>
	</template>


<script type="text/javascript">
	Vue.component('counter',{
		template:"#count",
		data:function(){
			return {
				count:"0"
			}
		},
		methods:{
			increace(){
				this.count++;	
			}
		}
	})
</script>

组件切换

v-if和v-else


<body>
	<div class = "app ">
		<a href="" @click.prevent="flag=true">登录</a>
		<a href="" @click.prevent="flag=false">注册</a>
		<login v-if="flag"></login>
		<register v-else="flag"></register>
	</div>

	<template id="login">
		<div>
			<h1>登录</h1>
		</div>
	</template>

	<template id="register">
		<div>
			<h2>注册</h2>
		</div>
	</template>
</body>

<script type="text/javascript">
	Vue.component('login',{
		template:'#login',
		data:function(){
			return {
			}
		}
	});

	Vue.component('register',{
		template:"#register",
		data:function(){
			return {
			}
		}
	})

	var vm = new Vue({
		el:'.app',
		data:{
			flag:true,
		}

	})
</script>

在这里插入图片描述

component标签

  1. vue提供的component元素，展示对应名称的组件；
  2. component是一个占位符，：is属性为要展示的组件的名称

<body>
	<div class = "app ">
		<a href="" @click.prevent="comName='login'">登录</a>
		<a href="" @click.prevent="comName='register'">注册</a>
		<component :is="comName"></component>
	</div>

	<template id="login">
		<div>
			<h1>登录</h1>
		</div>
	</template>

	<template id="register">
		<div>
			<h2>注册</h2>
		</div>
	</template>
</body>

<script type="text/javascript">
	Vue.component('login',{
		template:'#login'
	});

	Vue.component('register',{
		template:"#register"
	})

	var vm = new Vue({
		el:'.app',
		data:{
			comName:"login",
		}
	})
</script>

切换的动画

通过component的mode属性设置组件的切换的模式

<style type="text/css">
	.v-enter,
	.v-leave-to{
		opacity:0;
		transform:translateX(150px);
	}

	.v-enter-active,
	.v-leave-active{
		transition:all 0.5s ease;
	}
</style>

<transition mode="out-in">
	<component :is="comName"></component>
</transition>

组件父子数据传递

  1. 默认vue实例中定义的私有组件中，无法访问vue实例data中的数据和methods
  2. 父组件通过属性绑定的方式，把数据传递给子组件；
  3. 需要在子组件props中把父组件传递的属性先定义一遍，才能使用(最好不用大写)，props里面的数据都是父中传递的
  4. 子组件data是子组件私有的数据，可读可写
  5. props中的数据只能读
<body >
	<div class = "app ">
		<com1 v-bind:parentmsg="msg"></com1>
	</div>
	<template id="forcom1">
		<h1>子组件:{{parentmsg}}</h1>
	</template>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			msg:"父中的数据",
		},
		components:{
			com1:{
				data(){
					return{
						msg:"123"
					}
				},
				template:"#forcom1",
				// template:'<h1>子组件:{{parentmsg}}</h1>',
				props:['parentmsg'],
				methods:{}
			}
		}
	})
</script>

父组件传递方法

  1. 父组件传递方法，使用v-on:的方式绑定（也可简写@）
  2. 子组件通过$emit()出发父传递的方法
  3. $emit（）方法的第一个参数为父组件绑定的名称，之后的参数为传递给函数的参数；
  4. 子组件可以通过传参的方式向父组件传递数据；
<body >
	<div class = "app ">
		<com1 v-on:parentfunc="show"></com1>
	</div>
	<template id="forcom1">
		<input type="button" value="show" @click="click" name="">
	</template>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			msg:"父中的数据",
			sonData:{}
		},
		methods:{
			show(msg,data){
				console.log("父组件的函数" + msg);
				this.sonData = data;
				console.log(this.sonData);
			}
		},
		components:{
			com1:{
				data(){
					return {
						name:"Tom",
						id:1,
						ability:{
							des:10,
							life:100
						}
					}
				},
				template:"#forcom1",
				methods:{
					click(){
						this.$emit('parentfunc',123,this.ability);
					}
				}
			}
		}
	})
</script>

结果：
在这里插入图片描述

组件练习

<link rel="stylesheet" type="text/css" href="./bootstrap.css">
<body >
	<div class = "app ">
		<com1 v-on:parentfunc="load"></com1>
		<ul class="list-group" v-for="(item,index) in list" :key="item.id">
			<li class="list-group-item">
				<span class="badge">评论人：{{item.user}}</span>
				{{item.content}}
			</li>
		</ul>

	</div>

	<template id="forcom1">
		<div>
			<div class="form-group">
				<label>评论人：</label>
				<input type="text" class="form-control" name="" v-model="user">
			</div>
			<div class="form-group">
				<label>评论内容：</label>
				<textarea class="form-control" v-model="content"></textarea>
			</div>
			<div class="form-group">
				<input type="button" name="" value="发表评论" class="btn btn-primary" @click="click">
			</div>
		</div>
	</template>

</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
			list:[
				{id:Date.now()+1,user:'Trump',content:'fake news'},
				{id:Date.now()+2,user:'Biden',content:'please,emm'},
				{id:Date.now()+3,user:'King',content:'i have a dream'},
			]
		},
		methods:{
			load(){
				var list = JSON.parse(localStorage.getItem('cmts') || '[]');
				this.list = list;
			}
		},
		components:{
			com1:{
				data(){
					return {
						user:"",
						content:""
					}
				},
				template:"#forcom1",
				methods:{
					click(){
						var newContent = {id:Date.now(),user:this.user,content:this.content};
						var list = JSON.parse(localStorage.getItem('cmts') || '[]');
						list.unshift(newContent);
						localStorage.setItem('cmts',JSON.stringify(list));
						this.user = this.content = "";
						this.$emit('parentfunc');
					}
				}
			}
		},
		created(){
			this.load();
		}
	})
</script>

效果：
在这里插入图片描述

获取Dom元素

可通过引用获取dom元素，为标签的ref属性赋值string，通过$refs.string获取对应的标签dom；

<body >
	<div class = "app ">
		<com1 ref="com1t"></com1>
		<input type="button" value="get" @click="getEle" name="">
		<h1  ref="myh1">h1标签</h1>
	</div>
	<template id="forcom1">
		<input type="button" value="show" name="">
	</template>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el:'.app',
		data:{
		},
		methods:{
			getEle(){
				console.log(this.$refs.myh1.innerText);
				console.log(this.$refs.com1t.name);
				this.$refs.com1t.hello();
			}
		},
		components:{
			com1:{
				data(){
					return {
						name:"tom"
					}
				},
				methods:{
					hello(){
						console.log("hello")
					}
				},
				template:"#forcom1",
			}
		}
	})
</script>

同样也可以通过ref属性获取组件，并访问组件中的数据及方法。

文化建设

题金陵渡
金陵津渡小山楼
一宿行人自可愁
潮落夜江斜月里
两三星火是瓜洲
vue component 值传递
DanielChen的博客
04-05 7432
1. 父组件传递给子组件 子组件将需要接收的参数作为props参数。 父组件将data中的值传递给接收参数。 2.子组件传值给父组件 子组件通过v-on声明函数，在函数中使用this.$emit(函数名，data)。 父组件通过v-on声明函数，函数名与子组件相同。父组件在方法中，可以获取到传的参数。 父传子子组件代码： <template> <Menu mode="horizontal" :theme="theme1" active-name="1"> .
vue component 跨组件传值（学习）
259的博客
12-21 1258
vue component 跨组件传值（学习）
在Vue中，组件传参
最新发布
凌寒赋雪的博客
08-29 326
在Vue中，组件传参
Vue的组件间传参
m0_62338331的博客
06-04 1527
根据类型一般有父组件向子组件传参数、子组件向父组件传参数。
Vue动态组件＜component＞传递变量
科技向善
02-06 3704
Vue的动态组件是一个强大的模块，通过动态组件可以让页面组件随意切换，不需要通过路由定位，它在使用过程和普通自定义的组件基本一致，如下像下方给动态组件传递props值在以上的currentComponent组件中，也有一个parentProp的props变量，这样就可以逐层传递变量啦，用于比如权限等级不同，显示的表格的列数不同等（不同权限等级对应不同的parentProp值）
vue 组件之间传值
Y_Tiam的博客
04-04 124
创建一个子组件 Vue.component('组件的标签'，{ template: '模板内容' }) // 例如 定义一个子组件 Vue.component('child'，{ template: '<div></div>' }) // 定义一个父组件 将子组件在父组件中使用 Vue.component('parent'，{ template: `<div>
Vue 组件之间传值通信（常用方法以及示例）
记录常见的问题以及解决办法
04-27 929
Vue 组件之间传值通信（常用方法以及示例）
vue学习笔记（超详细）
jiey0407的博客
03-09 5847
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
一、VUE学习笔记-vue的简单介绍
ITCloud
05-16 241
一、vue起步 1.渲染节点数据 2.开发简单的ToList 2.2组件化ToList 2.3子组件向父组件传值 一、vue起步 开发版下载 1.渲染节点数据 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&q
Vue学习笔记（组件、动画）
小言同学的博客
02-22 463
目录 一、定义Vue组件 1.1 全局组件定义的三种方式 1.2 使用component定义私有组件 二、组件中的data 三、组件切换 四、组件传值 4.1 父组件向子组件传值 4.2 子组件通过事件调用向父组件传值 五、Vue中的动画 5.1 使用过渡类名实现动画 5.2 动画——自定义v-前缀 5.3 使用第三方animate.css类库实现动画 5.4 钩子函数实现小球半场动画 5.5 使用transition-group元素实现列表动画 一、定义...
【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
qq_48687155的博客
07-26 587
动态组件，插槽，自定义指令，tabbar案例
Vue的学习笔记——Four：组件化、父子兄弟组件传值
leilei__66的博客
03-29 170
组件化开发 组件化开发思想 组件化规范：Web Components 尽可能多的重用代码 自定义组件的方式不太容易（html、css和js） 多次使用组件可能导致冲突 通过创建封装好功能的定制元素解决 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NA1ZN2RY-1617027150596)(F:\笔记\Vue基础\image-20210126110142299.png)] 组件注册 Vue.component(组件名称, { data: 组件数据, templa
vue组件（component）之前的通信（传值）
C05230的博客
09-28 2823
父传子：(在子组件中访问父组件中的数据) 1.在父组件中使用子组件时，添加自定义属性，属性值为传输的内容 2.在子组件中，使用props:[‘msg’]接收父组件中传递的属性 props:[‘msg’],//当前子组件希望从父组件中接收的属性 多个属性使用逗号分隔 props声明在和data同级位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
vue组件之间的传参
weixin_62322136的博客
08-03 1694
1.父组件传子组件：通过props2.子组件传父组件：自定义事件父组件：vue实例；子组件：是放在vue实例挂载点的内部。
vue--组件机制--组件传值
cmy741741的博客
11-27 1178
概述 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。组件注册的时候需要为该组件指定各种参数。 组件定义 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外...
Vue组件（component方法注册组件和props属性实现组件之间传值）
y17757773039的博客
10-09 3674
Vue注册组件Vue.component，template模板，组件之间使用props属性传值（父传子），简单介绍
vue组件传值方式有哪些
似水流年QC的博客
01-13 1578
Vue 作为一个轻量级的前端框架，核心两大特性就是响应式编程和组件化。本文针对组件之间传值做详细讲解。Vue就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，下面展开说明。如上图所示：父子关系：A与B，A与C，B与D，C与E。
vue组件传参
qq_35859392的博客
02-16 241
vue组件传参 一、父子组件的定义 　　负值组件的定义有两种，我称为常规父子组件和特殊父子组件。 　　1.1、常规父子组件 　　将其他组件以import引入用自定义标签接收，在当前组件中component里注册该标签，页面上可以直接用&lt;自定义标签&gt;&lt;/自定义标签&gt;样子使用。当前组件为父组件，被引入的组件为子组件。 　　引入子...
component传值问题
qq_35438359的博客
04-16 4283
Vue.component('xxx',{template:'&lt;div&gt;xxxxxxxxx&lt;/div&gt;'  //必须有跟元素,data:function(){return:{xxx:xxx,}},methods:{xxx:function(){xxx}}})父子传值&lt;my-component message="hello"&gt;&lt;/my-component&g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值