组件化开发

最新推荐文章于 2023-07-03 13:56:49 发布
最新推荐文章于 2023-07-03 13:56:49 发布
阅读量448 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinqianwang/article/details/82813420
版权

最简组件

全局组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<!-- 调用必须在某一个vue作用域中调用 -->
		<test></test>
	</div>
	
	<script>
		//全局组件
		Vue.component("test",{
			template:"<h1>Hello Word!</>"
		});
		let vm = new Vue({
			el:'#box',
			data:{
				msg:"2423",
			}
		})
	</script>
</body>
</html>

上面那种有很多局限性：

第一写标签的时候没有帮助，速度慢，准确性低

全局组件改良版

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<!-- 调用必须在某一个vue作用域中调用 -->
		<test></test>
	</div>
	<template id="tt">
		<div>
			<h3>这种方法其实跟上一种没啥区别，只是把标签独立出来了</h3>
			<p>这样做的好处就是标签不必用一个大的根标签来套住</p>
		</div>
	</template>

	<script>
		//全局组件
		Vue.component("test",{
			template:"#tt"
		});
		let vm = new Vue({
			el:'#box',
			data:{
				msg:"2423",
			}
		})
	</script>
</body>
</html>

这是命名规则的实例：

命名：myConpu

调用：<my-compu></my-compu>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<!-- 调用的时候注意格式，前面小写的照写，然后后面的全小写中间加斜杠 -->
		<my-compu></my-compu>
	</div>

	<script>
		//这里的命名和调用是驼峰名名
		Vue.component("myCompu",{
			template:"<h3>Hello Word!</h3>"
		})
		let vm = new Vue({
			el:'#box',
			data:{
				msg:"2423",
			}
		})
	</script>
</body>
</html>

普通局部组件：带参数和方法

这个实例应该着重注意他的参数和方法的定义，data的定义是和vue对象的有所差别，需要把data写成一个函数然后返回参数值，methods的使用是一样的，写方法然后在具体的标签上使用，注意不能在template上使用，不然识别不到

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<!-- 调用的时候注意格式，前面小写的照写，然后后面的全小写中间加斜杠 -->
		<my-compu></my-compu>
	</div>

	<script>
		//这里的命名和调用是驼峰名名
		Vue.component("myCompu",{
			template:"<h3 @click='ale()'>{{msg}}</h3>",
			data:function(){
				return {
					msg:"第一个文本参数",
				}
			},
			methods:{
				ale:function(){
					alert(this.msg);
				}
			}
		})
		let vm = new Vue({
			el:'#box',
			data:{
				msg:"2423",
			}
		})
	</script>
</body>
</html>

改良版全局变量：带参数和方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<my-compu></my-compu>
	</div>
	<template id="tt">
		<div>
			<h1>{{msg}}</h1>
			<br/>
			<button @click="gai()">点击改变</button>
		</div>
	</template>
	<script>
		Vue.component("myCompu",{
			template:"#tt",
			data:function(){
				return{
					msg:"点击下面的按钮，这里的参数就会改变",
				}
			},
			methods:{
				gai:function(){
					this.msg="是吧，没骗你对吧！"
				}
			}
		})
		let vm = new Vue({
			el:'#box',
			data:{
				msg:"2423",
			}
		})
	</script>
</body>
</html>

局部组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<my-com></my-com>
	</div>
	<template id="tt">
		<div>
			<span>{{msg}}</span>
			<img :src="imgSrc">
		</div>
	</template>
	<script>
		
		let vm = new Vue({
			el:'#box',
			data:{
				
			},
			components:{
				"myCom":{
					template:"#tt",
					data:function(){
						return{
							msg:"2423",
							imgSrc:"http://scimg.158pic.com/allimg/160718/103-160GQ03AK96.jpg"
						}
					}
				}
			}
		})
	</script>
</body>
</html>

全局组件——参数传入（props）

重点：在数据传输这里，有个坑，就是你的数据名称假如含有一个大写字母，下面的props就不会识别，也就不会把数据加载到组件当中去

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<my-com msg="images/1.jpg" imgurl="http://pic2016.ytqmx.com:82/2017/1019/10/1.jpg!960.jpg"></my-com>
	</div>
	<template id="tt">
		<div>
			<h1>{{msg}}</h1>
			<img :src="imgurl">
		</div>
	</template>
	<script>
		let vm = new Vue({
			el:'#box',
			data:{
				
			},
			components:{
				"myCom":{
					props:['msg','imgurl'],
					template:"#tt",

				}
			}
		})
	</script>
</body>
</html>

全局组件——参数传入（solt:匿名槽口）

可以用来制作头部导航和尾部导航栏，内容就包裹在slot之中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<my-com>这是初始的内容</my-com>
	</div>
	<template id="tt">
		<div>
			<p>在内容之前的数据</p>
			
			<slot>如果初始的内容为空就显示这部分</slot>

			<P>在内容之后的</P>
		</div>
	</template>
	<script>
		let vm = new Vue({
			el:'#box',
			components:{
				"myCom":{
					template:"#tt",

				}
			}
		})
	</script>
</body>
</html>

全局组件——参数传入（solt:具名槽口）

这个示例中的div会根据slot的名字而被引用到template中去

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<my-comput>
			<div slot="Cpu">Intel core i</div>
			<div slot="GPU">GTX980 Ti</div>
			<div slot="Memory">king stom 32G</div>
		</my-comput>
	</div>
	<template id="tt">
		<div>
			<slot name="Cpu">1</slot>	
			<slot name="GPU">2</slot>
			<slot name="Memory">3</slot>
		</div>
	</template>
	<script>
		let vm = new Vue({
			el:'#box',
			data:{
				msg:"jin",
			},
			components:{
					"myComput":{
						template:"#tt",
					}
				}
		})
	</script>
</body>
</html>

父子组件开发之函数关联方法

这个函数的方法是绑定父组件的函数，当我们在子组件方法函数中调用了这个方法之后，父组件关联函数也会被触发

关联的关键步骤在调用组件标签的时候使用一个方法名关联父组件方法名，然后传入子组件，通过this.$emit（方法名）来调用父组件方法

<my-compon v-on:add1="addtotal"></my-compon>

methods:{
                        add888:function(){
                            this.$emit("add1");
                        }
                    }

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计数器</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		{{msg}}
		<my-compon v-on:add1="addtotal"></my-compon>
	</div>
	
	<template id="tt">
		<div>
			<button @click="add888">计数器</button>
		</div>
	</template>
	  
	<script>
		let vm = new Vue({
			el:'#box',
			data:{
				msg:1,
			},
			methods:{
				addtotal:function(){
					this.msg+=1;
				}
			},
			components:{
				"myCompon":{
					template:"#tt",
					methods:{
						add888:function(){
							this.$emit("add1");
						}
					}
				},
			}
		})
	</script>
</body>
</html>

 

jinqianwang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue组件化开发
m0_62351236的博客
02-07 1191
一般我们在面试的时候面试官通常会问以下问题 你封装过组件吗？ 说一下组件封装？ 你在项目中是如何封装组件的？ … 而我的回答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多
c# 组件化编程技术
06-02
组件化编程技术C#源于C 和C++ .1970 年Brian 和Dennis Ritchie 首创了C 语言由于其简单灵活的特点很快成为世界上最流行的语言之一 然而C 语言是一个面向过程的程序设计语言随着软件开发技术的进步产生了面向对象的程序设计思想. 二十世纪八十年代初美国AT&T 贝尔实验室设计并实现了C++语言增加了对面向对象的程序设计的支持
原生HTML组件化
m0_73723713的博客
07-03 1179
js插件命名为include.js。
组件化(一)
qq_30621333的博客
03-29 3900
早期的单一分层模式 问题一：无论分包怎么做，随着项目增大，项目失去层次感，后面接手的人扑街 问 题二：包名约束太弱，稍有不注意，就会不同业务包直接互相调用，代码高耦合 问题三：多人开发在版 本管理中，容易出现代码覆盖冲突等问题 所有的代码都写在app模块中不同的包里面 1.什么是组件化,为什么需要组件化 组件化的意义：不相互依赖，可以相互交互，任意组合，高度解耦，自由拆卸，自由组装，重复利用， 分层独立化 此时：app不在是老大，子模块都是小弟 组件化后，所有的module都平起平坐，有
Android组件化开发实践和案例分享
weixin_33895657的博客
01-22 480
目录介绍 1.为什么要组件化 1.1 为什么要组件化 1.2 现阶段遇到的问题 2.组件化的概念 2.1 什么是组件化 2.2 区分模块化与组件化 2.3 组件化优势好处 2.4 区分组件化和插件化 2.5 application和library 3.创建组件化框架 3.1 传统APP架构图 3.2 组件化需要考虑问...
Flutter组件化开发方案
01-27
【Flutter组件化开发方案】 组件化开发是一种将大型应用程序拆分为独立、可重用的模块化组件的方法，有助于提升代码的可维护性、可扩展性和团队协作效率。在Flutter中，随着业务需求的增长，单纯地将Flutter作为...
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
组件化开发实例
06-29
组件化开发是现代软件开发中的一个重要实践，尤其在iOS应用开发中，它能极大地提高代码的可重用性、可维护性和团队协作效率。在这个"组件化开发实例"中，我们将探讨协议组件化、注册URL组件化以及动态创建组件的概念...
Android组件化开发
01-03
什么是组件化开发 所谓组件化，就是将整个庞大的项目以业务逻辑进行拆分成多个模块，并且各个模块之间相互独立，相互解耦，每一个模块可以单独进行开发调试，各个模块调试完，以library的形式依赖在壳App中组合成一...
安卓组件化开发架构，设计思路，代码大全
07-29
本篇将深入探讨“安卓组件化开发架构，设计思路，代码大全”，并结合使用javapoet库来实现，确保高度的兼容性。 首先，组件化的核心思想是解耦合。在传统的一体化开发模式下，各个功能模块相互依赖，导致代码结构...
前端组件化和模块化最大的区别是什么_组件化开发和模块化开发概念辨析
weixin_39985820的博客
11-24 772
网上有许多讲组件化开发、模块化开发的文章，但大家一般都是将这两个概念混为一谈的，并没有加以区分。而且实际上许多人对于组件、模块的区别也不甚明了，甚至于许多博客文章专门解说这几个概念都有些谬误。想分清这两个概念我觉得结合一下软件的渐进式开发场景更容易理解。但是下面的篇幅会比较长，所以我先说结论，不耐烦的同学可以先看：概念区别对比类别 目的 特点 接口 成果 架构定位组件 重用、解耦 高重用、松耦合...
浅谈组件化
松花皮蛋的黑板报
02-19 672
我之前在做业务需求的时候，很多的个性化需求并不能快速响应，实现后有时也很难保证系统的可阅读性。不过好消息是，我今年在做京东内容领域的组件化改造和能力输出，之前的问题或许会得到根本性的解决...
组件化、模块化、集中式、分布式、服务化、面向服务的架构、微服务架构
拾一二的博客
02-16 2792
我们用网站打个比方：一个大型网站的web界面就是它整个系统入口点和边界，可能要面对全世界的访问者（所以经常会做国际化之类的工作），而系统内部传统的OO接口和程序则被隐藏在web界面之后，只被内部较小范围使用。集中式系统的最大的特点就是部署结构非常简单，底层一般采用从IBM、HP等厂商购买到的昂贵的大型主机。现在将Echo发布为Java WebServices，并由底层框架自动生成WSDL来作为标准化的服务契约，这样就能与远程的各种语言和平台互操作了，较好的解决了上面提到的松耦合和可重用的问题。
Android---组件化
qq_44950283的博客
12-17 4290
1.）组件（Component）,是对数据和方法的简单封装，功能单一，高内聚，并且是业务能划分的最小粒度。2.）组件化是基于可重用的目的，将大型的软件系统按照分离关注点的形式，拆分成多个独立的组件，使得整个软件系统也做到电路板一样，是单个或多个组件元件组装起来，哪个组件坏了，整个系统可继续运行，而不出现崩溃或不正常现象，做到更少的耦合和更好的内聚。
营销策划 -2024非遗大展预热引流策划方案.pptx
最新发布
07-13
营销策划 -2024非遗大展预热引流策划方案.pptx
vue脚手架组件化开发
09-13
在Vue.js中，可以使用脚手架来支持组件化开发。脚手架是一个用于快速生成项目结构和代码的工具。引用中提到的vde-cli脚手架就是一个例子。 使用Vue脚手架进行组件化开发的步骤如下： 1. 首先，安装Vue脚手架（vde-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值