【Vue组件详解（一）】

Vue组件详解（一）

简介
对组件的理解
- 传统方式编写页面
- 组件方式编写页面
非单文件组件
- 完整代码
总结

简介

组件的定义其实就是实现应用中局部功能代码（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>Document</title><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>Document</title><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:`<div><h2>人物姓名：{{name}}</h2><h2>人物年龄：{{age}}</h2>    </div>`,data(){return{name:'蒙奇·D·路飞',age:19,}}});// 创建TestB组件const testb = Vue.extend({template:`<div><h2>出生地点：{{address}}</h2><h2>悬赏金：{{amount}}</h2></div>`,data(){return{address:'东海风车村',amount:'15亿贝利'}}});// 创建vmnew 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:`<div><h2>出生地点：{{address}}</h2><h2>悬赏金：{{amount}}</h2></div>`,data(){return{address:'东海风车村',amount:'15亿贝利'}}});// 全局注册组件Vue.components('testb', testb);
...

总结

以上就是我对Vue组件基本使用的理解，也算是自己学习Vue的笔记，本篇文章介绍了Vue组件基本使用，但是都是基于非单文件组件展开，通过上述，相信大家对Vue组件应该有了一些基本的了解，也能学会组件的最基本使用，接下来我也会继续对Vue组件展开更深层次的学习和理解。

组件化编码的出现，一定程度上提高了我们开发的效率，同时，在Vue中，组件也是一个必不可少的部分，学习组件之后，我们就可以进行单页面应用的开发，总之，以上也是我对Vue学习过程中自己的理解与看法，文章略显拙劣，如有不同看法，可根据自身选择。

持续更新中~~~~

喜欢记得点赞关注呀！！！