一，概念

组件：就是一个自定义的标签，可以代表一些特定的功能，主要封装 css，html，js；

特点：组件是可复用的 Vue 实例，可以提高开发效率，方便维护，

组件之间可以相互嵌套，有完整的生命周期和自己的响应式数据及方法：

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，

每一个vue组件都是一个独立的vm个体，

例如 data、computed、watch、methods 以及生命周期钩子等。

仅有的例外是像 el 这样根实例特有的选项

注意 ：组件中的data必须是个函数类型，函数返回一个对象作为组件的数据，

自己的模板中只能读取自己data中的数据

组件化的概念：可以把很直观的页面分割成若干个独立的组件，每个组件包含自己的逻辑、页面和样式，再将这些独立的组件合并传给一个复杂的页面，这样既减少逻辑复杂度，又实现了代码的重用，页面是组件的容器，组件自由组合成完整的界面，当不需要某个组件时，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个页面的运行

组件分类：

1，页面级组件（一个页面是一个组件）

2，基础组件，就是将可复用的部分抽离出来

全局组件，局部组件，函数式组件，异步组件（点击个按钮，加载个组件）

全局组件：必须在实例之前注册,多个实例都可以使用

局部组件：只能在当前的实例中使用

二、组件的创建和使用

创建全局组件：

创建加注册全局组件：

Vue.component('组件名',{template:'`<div>`我是模板</div>}

注意：这里的组件名定义方式，如果是使用驼峰命名法，使用的时候需要用 - 这个符号进

行分隔，并把字母小写

例：PascalCase 变为 pcascal-case

创建局部组件：

三部曲：1.创建一个组件 2.注册这个组件 3.使用这个组件

a：创建组件

let Child={

template:'<div>child</div>'

}

b：注册组件    在vue实例中注册

let vm = new Vue({

el:'#app',

components:{Child}

})

c：使用组件    在谁里面注册的组件，就在谁的模板中使用<Child></Child>

创建的组件是一个对象类型的，里面的template模板中只能定义一个根容器，根容器中可以包多个标签

注册组件在哪个Vue根实例的管理范围内使用，就注册到哪个根实例上,

使用组件使用组件时要用成对的html标签进行页面使用