Vue——Vue的组件化

最新推荐文章于 2023-06-16 09:44:20 发布
最新推荐文章于 2023-06-16 09:44:20 发布
阅读量398 收藏 1
点赞数 1
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44891295/article/details/105403038
版权

Vue——邂逅Vue
Vue——Vue的基础语法
Vue——Vue的组件化
Vue——slot_插槽的基本使用

文章目录

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="demo">		
			<cpn></cpn>
		</div>
		
		<script>
			const cpn=Vue.extend({
				template: '<div><h1>dada</h1></div>'
						
			});
			Vue.component('cpn',cpn)
		</script>
	</body>
</html>

2：组件步骤解析

在这里插入图片描述
在这里插入图片描述

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="demo">		
			<cpns></cpns>
		</div>
		
		<script>
			const cpn=Vue.extend({
				template: '<div><a>dadadd</a></div>'
						
			});
			console.log(1);
			Vue.component('cpns',cpn);
			console.log(2);
			
			//局部组件
            const demo=new Vue({
				el: '#demo',
				components: {
					cpns: cpn
				}
			})
		</script>		
	</body>
</html>

4：父组件和子组件

在这里插入图片描述
代码演示


<!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="demo">
			<mycp></mycp>
		</div>
		<script>
			const cpp=Vue.extend({
				
				template: '<div><h1>ppp</h1></div>',

			})
			const cps=Vue.extend({
				
				template: '<div><h1>sss</h1><cpp></cpp></div>',
				components: {
					cpp: cpp
				}
			})
			
			const demo=new Vue({
				el: "#demo",
				components: {
					mycp: cps
				}
			})	
		</script>
	</body>
</html>

5：注册组件的语法糖

在这里插入图片描述
代码示例如下

<!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="demo">		
			<cpns></cpns>
		</div>
		
		<script>
            const demo=new Vue({
				el: '#demo',
				components: {
					cpns: {
				template: '<div><a>dadadd</a></div>'
						
			}
				}
			})
		</script>		
	</body>
</html>

6：组件模板抽离的方法

在这里插入图片描述

<!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="demo">
			<mycp></mycp>
		</div>
		<template id="demo1">
			<div>
				<h1>sss</h1>
			</div>
		</template>
		<script>
			const cpp=Vue.extend({
				
				template: '#demo1',

			})
			
			const demo=new Vue({
				el: "#demo",
				components: {
					mycp: cpp
				}
			})

			
		</script>
	</body>
</html>

7：组件数据的存放

在这里插入图片描述
在这里插入图片描述

如果 Vue 没有这条规则(data必须是函数)，点击一个按钮就可能会影响到其它所有实例：

组件存放数据演示

<!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="demo2">
			<mycp></mycp>
		</div>
		
		<template id="demo">
			<div>
			<h2>{{message}}</h2>
			<h1>dadad</h1>
			</div>
		</template>
		<script>
            const a=Vue.extend({
				
				template: '#demo',
				data() {
					return {
						message: 11
					}
				}									
			})
					
		    const demo=new Vue({
				el: '#demo2',
				components: {
					mycp: a
				}
			})
		</script>
	</body>
</html>

8：父子组件的通信

在这里插入图片描述

8.1 props基本用法——父传子

在这里插入图片描述
代码示例

<!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">
			<mycp v-bind:datas="datas"></mycp>
			
		</div>
		<template id="demo">
			<div>{{datas}}</div>
			
		</template>
		<script>

			const cps=Vue.extend({
				
				template: '#demo',
				props: ['datas'],
			})
			
			const app=new Vue({
				el: "#app",
				data: {
					datas: ['daa','aaa','aaa']
				},
				components: {
					'mycp': cps
				}
			})

			
		</script>
	</body>
</html>

8.1.1 props数据验证

在这里插入图片描述

8.1.2 父组件访问子组件：$children

在这里插入图片描述
代码演示：


<!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">
			<mycp v-bind:datas="datas"></mycp>
			<button v-on:click="btnclick()">点击</button>
			
		</div>
		<template id="demo">
			<div>{{datas}}
			</div>
		</template>
		<script>

			const cps=Vue.extend({
				
				template: '#demo',
				props: ['datas'],

				
			})
			
			const app=new Vue({
				el: "#app",
				data: {
					datas: ['daa','aaa','aaa']
				},
				components: {
					'mycp': cps
				},
				methods: {
					btnclick(){
						console.log(this.$children[0].name)
					//	console.log(this.$children.datas[0])
					}
				}
			})

			
		</script>
	</body>
</html>

8.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">
			<mycp v-on:itemclick="accpetnews"></mycp>
			
		</div>
		<template id="demo">
			<div>
				<button type="button" v-for="item in species" v-on:click="btnclick(item)">{{item.name}}</button>
				
			</div>			
		</template>
		<script>

			const cps=Vue.extend({
				
				template: '#demo',
				data() {
					
					return {
						species: [{id: 'aa',name: '游戏'},
						{id: 'bb',name: '生活'},
						{id: 'cc',name: '学习'}
						]
					
					}
				},
				methods: {
					btnclick(item) {
						//console.log(item)
						//子组件发送事件
						this.$emit('itemclick')
					}
				}
			})
			
			const app=new Vue({
				el: "#app",
				data: {
					datas: ['daa','aaa','aaa']
				},
				components: {
					'mycp': cps
				},
				methods: {
					accpetnews(){
						console.log(1)
						
					}
				}
			})		
		</script>
	</body>
</html>

在这里插入图片描述

8.2.1 子组件访问父组件：$parent

在这里插入图片描述

<!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">
			<mycp v-bind:datas="datas"></mycp>
			
		</div>
		<template id="demo">
			<div>{{datas}}
			<button v-on:click="btnclick()">点击</button>
			</div>
			
			
		</template>
		<script>

			const cps=Vue.extend({
				
				template: '#demo',
				props: ['datas'],
                methods: {
					btnclick(){
						console.log(this.$parent)
					//	console.log(this.$children.datas[0])
					}
				}
				
			})
			
			const app=new Vue({
				el: "#app",
				data: {
					datas: ['daa','aaa','aaa']
				},
				components: {
					'mycp': cps
				}
		
			})

			
		</script>
	</body>
</html>
福建选手阿俊
关注
专栏目录
Vue-组件化
Sunshine的博客
02-28 913
Vue-组件化一、定义vue组件二、 全局组件定义的三种方式1、使用vue.extend 来创建全局的vue组件2、直接创建3、在外部定义template 结构三、定义私有的组件四、组件中的data 传值 以下均为自用学习笔记 一、定义vue组件 什么是组件，组件的出现是为了拆分vue实例的代码量的，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么样的功能就可以去调用什么样的组件即可。 组件化和模块化的不同： 模块化：从代码逻辑的角度进行划分；方便代码分层开发，保证功能模块职能单一 组件化：
Vue——组件化开发
鹿蹊zz的博客
08-09 2353
我们在复用组件的时候肯定希望，各自组件用各自的变量，如果确实需要都用一样的，可以全局组件注册，也可以是用vuex来进行状态管理。注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。的count是各自用各自的，像局部变量一样有块级作用域，这个块级就是vue组件的作用域。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到。​ 组件的思想是复用，定义组件当然是把通用的公共的东西抽出来复用。并不保证顺序，也不是响应式的。...
Vue组件化
weixin_48137421的博客
06-18 2280
vue组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
【Vue学习笔记】 组件化
biancheng_的博客
03-18 328
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
vue组件化
最新发布
javascript_good的博客
06-16 312
组件化：vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。
Vue--组件化【持续更新】
weixin_45844343的博客
08-06 158
Vue–组件化 组件化 理解 【 component 】 Vue的组件化，即将页面拆分为小功能块，他们功能独立。而我们再做项目时就可以直接用他们组装集成。后期的工作也会容易一些 Vue中，程序页面的功能增加，业务逻辑趋向复杂，处理过程就会困难，且不利于后期的维护，管理和扩展。 组件化是人们面对复杂问题而衍生出来的一中处理方式；即将问题拆分为可处理的若干个小问题，在放在整体当中解决 组件化是Vue的精髓，Vue就是由一个一个的组件构成的 组件化思想 它提供了一钟抽象，让我们可开发出多个 独立可复用的小组
Vue购物车——组件化.rar
05-01
在"Vue购物车——组件化"这个示例中，我们将深入探讨Vue组件的全局注册与局部注册、父子组件之间的通信以及数据的单向绑定等关键概念。 首先，我们来看**Vue组件的全局注册**。全局注册组件意味着在整个Vue实例中，...
vue组件化开发——动态组件
weixin_47450807的博客
02-10 1136
一、案例引入 我们在引入动态组件的时候，首先先看一个例子：如图所示 我们想要实现上面点击button按钮实现tab栏切换，可以通过如下两种方式： 第一个是使用v-if进行判断,代码如图所示： 我们通过一个变量当前的值是否为某一个字符串，来确定是否需要展示某一个组件。但是明显存在一个缺点就是代码过于繁琐。 第二个方法:采用动态组件的形式 动态组件component是一个全局注册的组件，其中存在一个属性为is,值为组件名，并且兼容大小写。 二、参数传入 如果想要在component上向某一个组件上传递属
vue——全局组件和局部组件
weixin_54362381的博客
08-19 389
全局组件: 1、Vue.component是Vue提供的创建全局组件的方法。语法:Vue.component("组件名",{}) 2、props:['content'], 【接收传过来的content值】 3、template:"<li>{{content}}</li>"【组件的内容模板，接收内容替换原标签内容后进行渲染】 4、 v-bind:content="item"【向子组件传递一个绑定值】 <div id="app"> <input typ
Vue基础知识+组件化开发+模块化开发总结
weixin_45802793的博客
01-24 2218
三、内容: 一、MVVM View层 视图层，我们前端开发时候的DOM层 主要就是给用户展示各种信息 Model层 数据层:可能是我们固定的思数据，更多的是来自我们的服务器，在网路上请求下来的数据 VueModel层 视图模型层 视图模型层是View和Model沟通的桥梁 一方面实现Data Binding(数据绑定), Model的改变反映到View 另一方面实现Dom Listener 二、Vue的生命周期 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
Vue3 源码阅读（10）：组件化 —— 实现原理
f18855666661的博客
08-24 1965
组件是对页面中内容的一种模块化封装，这篇博客讲解 Vue 中组件化的实现方式。
Vue系列之组件化
老__L的博客
12-10 697
组件化
Vue学习笔记（二）组件化和模块化
Andy-ZhangSir的博客
05-21 2260
Vue学习笔记（二）组件化和模块化前言组件化模块化什么是模块化es5模块化解决方案es6模块化解决方案 前言 本章记录一下vue的组件化和模块化，这是vue比较重要的知识点。会在实际开发中大量的使用到，因此，会比较详细的记录。 组件化 模块化 什么是模块化 es5模块化解决方案 在es5中，为了解决作用域的问题，很多时候我们都是通过闭包的形式。但是，使用闭包也会有它的问题，比如，一个js文件确实需要用到另一个js里的变量、函数等。不重写几乎是用不到的。因为此时每个js都是一个独立的作用域，无法相互使用。 我
【Vue2从入门到精通】认识Vue组件化，这篇文章就够了
全栈弄潮儿
03-18 523
当我们在构建Vue应用程序时，组件化是一个非常重要的概念。Vue组件化将应用程序划分为更小、更可重用的部分，从而使应用程序更易于维护、测试和扩展。
VUE的组件化
weixin_45617525的博客
01-11 698
VUE的组件化 什么是VUE的组件化 组件化是VUE的精髓，VUE及时由一个一个组件构成的。VUE的组件化涉及到的内容非常多。例如如页面，页面就是由一个个组件构成的，比如导航，列表，弹框，搜索框和下拉框等等… 页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件的时候，或者想要替换某个组件时，可以随时进行替换和删除，这些操作都不会影响到整个应用程序的运行。 VUE组件化的好处 （1）实现了html的封装和重用，在构建单页面应用方面有这独一无二的优势。 （2）大大提高了开发效率，并且
Vue入门之组件化开发
大灰狼的小绵羊哥哥的博客
03-20 1440
Vue入门之组件化开发 http://www.jianshu.com/p/6718ab1caa81 组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一，Vue的组件和也做的非常彻底，而且有自己的特色。尤其是她单文件组件开发的方式更是非常方便，而且第三方工具支持也非常丰富，社区也非常活跃，第三方组件也呈井
（VueJs）组件化
黑胡子大叔的博客
03-09 264
全局和局部组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 3、应用组...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值