简介
组件的定义其实就是实现应用中局部功能代码（html，css，js）和资源（MP3 ，MP4，img，ttf等）的集合。其优势是能复用编码，简化项目代码，提高运行效率，降低程序员重复编码。
什么是组件化？
当一个应用中的功能都是多组件的方式编写的，那这个应用就是一个组件化的应用。
对组件的理解 传统方式编写页面
传统方式下，我们进行前端开发时，都是一个html文档对应一个或多个css样式和js文件，且多个页面中，可能出现相同的部分，例如网页导航，例如网页底部信息，又难免出现复用同样的html结构，css样式和js文件，但假如任意改动其中一部分，那整个项目中复用的部分都会随之发生改变，就会造成依赖关系混乱，且不好维护。
其次，传统方式编写项目，每一个页面都是一个html文档，每出现一个新页面，就要新增一个html文档和一个或多个css样式及js文件，难免会存在文件较多的问题，每一个网页大多都是一个独立的部分，所以，代码复用率不是很高。
虽然说css样式和js文件已经完成了复用，但是在结构上，也就是html，是并没有复用的，很多时候我们在处理多个页面中相同的部分都是ctrl+c，ctrl+v进行复制，虽然结构只写了一遍，但是从方式上，并不是复用，而是复制。
组件方式编写页面
用组件方式来编写页面，其实简单理解来说就是把一个完整的网页拆分成一个又一个的组件，就比如说，一个网页包含头部导航，主体内容，底部信息。我们可以把网页头部导航划分为一个组件，剩下的同样对应划分为组件。拿顶部导航这个组件来说，这个组件包含了实现顶部导航的html结构，css样式和js代码。
每一个组件只负责对应的结构，样式和交互，各司其职，互不干扰，然后由这些一个又有一个的组件组成了一个完整的页面。且网页被拆分为组件后，我们就可以进行组件化编码，最直观的优点或亮点就是，组件复用，也就是多个网页相同的部分，只需要写一个组件然后按需引入就行。
非单文件组件
非单文件组件是指一个文件中包含多个组件，也就是说，所有的组件都是写在一个文件中。
首先，我们用一个实例引出非单文件的用法
上代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<h1>海贼王生命资料卡h1>
<h2>人物姓名：{{name}}h2>
<h2>人物年龄：{{age}}h2>
<hr>
<h2>出生地点：{{address}}h2>
<h2>悬赏金：{{amount}}h2>
div>
body>
<script>
Vue.config.productionTip = false //关闭Vue代码提示
new Vue({
el:"#app",
data:{
name:'蒙奇·D·路飞',
age:19,
address:'东海风车村',
amount:'15亿贝利'
}
})
script>
html>
效果图如下：
接下来我们按照方框内的划分，把页面拆分为TestA和TestB两个组件
第一步，创建组件：
第二步，注册组件（局部注册）：
第三步，使用组件：
完整代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="vue.js">script>
head>
<body>
<div id="app">
<h1>海贼王生命资料卡h1>
<testa>testa>
<hr>
<testb>testa>
body>
<script>
Vue.config.productionTip = false //阻止Vue在启动生成生产提示
// 创建TestA组件
const testa = Vue.extend({
template:`
人物姓名：{{name}}
人物年龄：{{age}}
`,
data(){
return{
name:'蒙奇·D·路飞',
age:19,
}
}
});
// 创建TestB组件
const testb = Vue.extend({
template:`
出生地点：{{address}}
悬赏金：{{amount}}
`,
data(){
return{
address:'东海风车村',
amount:'15亿贝利'
}
}
});
// 创建vm
new Vue({
el:"#app",
// 注册组件（局部注册）
components:{
testa:testa,
testb:testb,
}
})
script>
html>
插入一个有关于data写法的知识点，在未接触到组件时，data的写法都是对象式写法，但是从组件之后，data的写法要转换为函数式写法。
为什么要使用组件之后data要转换为函数式写法呢？
因为，我们说，使用组件最大的优势就是复用，也就是说假如我们创建了A组件并且使用data的对象式写法，但是之后很多地方都会用到A组件，此时，如果我们修改任意一个页面中A组件data属性中的数据，那么所有使用到A组件的地方，数据都会被更改，而函数式则不会，这样保证了在组件复用时，数据的独立性。
对象式写法，页面A中组件数据的改变会影响其他页面组件数据的改变
函数式写法，页面A中组件数据的改变不会影响其他页面组件数据的改变
刚刚我们说了组件的局部注册方法，接下来讲一讲组件的全局注册
围绕非单文件组件展开，组件的局部注册指的是在一个 Vue实例（vm） 下使用，如果想要在多个Vue实例下使用相同的组件，局部注册组件肯定是不行的，这种情况就要考虑组件的全局注册，全局注册组件之后，组件就可以被多个 Vue实例（vm） 使用，这时候，文章开头说的data函数式写法的优势也得以表现，各Vue实例可以共用一个组件， 且各相同组件的数据不会受到影响。
全局注册组件:
...
// 创建TestB组件
const testb = Vue.extend({
template:`
出生地点：{{address}}
悬赏金：{{amount}}
`,
data(){
return{
address:'东海风车村',
amount:'15亿贝利'
}
}
});
// 全局注册组件
Vue.components('testb', testb);
...
总结
以上就是我对Vue组件基本使用的理解，也算是自己学习Vue的笔记，本篇文章介绍了Vue组件基本使用，但是都是基于非单文件组件展开，通过上述，相信大家对Vue组件应该有了一些基本的了解，也能学会组件的最基本使用，接下来我也会继续对Vue组件展开更深层次的学习和理解。
组件化编码的出现，一定程度上提高了我们开发的效率，同时，在Vue中，组件也是一个必不可少的部分，学习组件之后，我们就可以进行单页面应用的开发，总之，以上也是我对Vue学习过程中自己的理解与看法，文章略显拙劣，如有不同看法，可根据自身选择。
持续更新中~~~~
喜欢记得点赞关注呀！！！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）