组件的概念
组件（component）是Vue.js中最强大的功能之一。Vue中的组件化开发就是把网页的重复代码抽取出来，封装成一个个可复用的视图组件，然后将这些组件 拼接到 一块就构成了一个完整的系统，这种方式非常灵活，可以极大的提高我们的开发和维护效率。
例如：项目中可能会有头部，底部，页侧边栏，内容区等组件，每个组件又包含了其他的像导航链接之类的组件。
组件就是对局部视图的封装，每个组件包含了HTML结构，CSS样式，JS行为，
使用组件可以提高开发效率，增强可维护性，更好的解决软件上高耦合，低内聚，无重用的三大代码问题。
组件的基本使用
为了能在模版中使用，这些组件 必须先注册以便Vue能够识别
有两种类型的注册类型，全局注册和局部注册。
全局注册
一般把网页中特殊的 公共部分注册为全局组件：轮播图，分页，通用导航栏等。
全局注册之后，可以在任何新建的Vue实例（new Vue）的模版中使用
格式：
Vue.component('组件名',{
template: '定义组件模版',
data: function(){ // data选项在组件中必须是一个函数
return {}
}
// 其他选项
})
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id='app'> <!-- 引用组件时，组件名必须采用横线分割符 --> <component-a></component-a> <!-- 引用组件 --> </div> <script> // 全局注册组件 Vue.component('component-a',{ // template选项指定组件的模版代码 template: '<div><h1>头部组件---{{ name }}</h1></div>', data: function(){ // 在组件中，data选项必须是一个函数 return { name : '全局组件' } } }) new Vue({ el: "#app", }) </script> </body> </html>
注意：如果template里的内容很多的时候，我们可以使用反单引号``，数字1旁边的
局部注册（子组件）
一般把一些非通用部分注册为局部组件，一般只适用于当前项目的
格式：
// 1. JS 对象来定义组件: var ComponentA = { data: function(){}， template: '组件模板A'} var ComponentA = { data: function(){}， template: '组件模板A'} //2. 在Vue实例中的 components 选项中引用组件： new Vue({ el: '#app', data: {}, components: { // 组件选项 'component-a': ComponentA // key：组件名，value: 引用的组件对象 'component-b': ComponentB } })
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id='app'> <!-- 引用组件时，组件名必须采用横线分割符 --> <component-b></component-b> <!-- 引用组件 --> </div> <script> // 定义局部 组件对象 const ComponentB = { template: '<h1>这是 {{ name }}</h1>', data: function () { return { name: '局部组件' } } } new Vue({ el: "#app", // 组件选项 components: { // key: value key为组件名，value就是组件对象 'component-b': ComponentB // 为了简洁把这个定义在外面 } }) </script> </body> </html>
实例
假设我们要使用组件化的思想完成下面的效果
可以使用全局组件的方式，代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <app-header></app-header> <app-main></app-main> <app-footer></app-footer> </div> <script> Vue.component('app-header', { template: '<div class="header"><h1>头部组件</h1></div>' }) Vue.component('app-main', { template: '<div class="main"><ul><li>用户管理</li><li>帐单管理</li><li>供应商管理</li></ul></div>' }) Vue.component('app-footer', { template: '<div class="footer"><h1>底部组件</h1></div>' }) new Vue({ el: '#app' }) </script> </body> </html>
但是这样写有一个问题，那就是所有的代码都写在一起，看起来不美观，不易于维护，那我们可以把组件都抽取出来，在引用，目录结构如下
component目录下放的是我们的组件
Vue.component('app-footer', {
template: '<div class="footer"><h1>底部组件</h1></div>'
})
Vue.component('app-header', {
template: '<div class="header"><h1>头部组件</h1></div>'
})
Vue.component('app-main', {
template: '<div class="main"><ul><li>用户管理</li><li>帐单管理</li><li>供应商管理</li></ul></div>'
})
我们就可以在多个组件示例中引用了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <app-header></app-header> <app-main></app-main> <app-footer></app-footer> </div> <script src="node_modules/vue/dist/vue.js"></script> <script src="component/Header.js"></script> <script src="component/Main.js"></script> <script src="component/Footer.js"></script> <script> new Vue({ el: '#app' }) </script> </body> </html>
这样我们就完成了组件化，代码易于维护，以后想更改哪个组件，直接找对应的js文件就可以了
注意：template 模板中必须要的根元素，所以要在提取的内容外层加上 <div></div> , 一定要不要少了，不然报以下错误：
