今日学习内容：
1.Vue组件
组件（component） 是 Vue.js 最强大的功能之一。
Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。
2.组件基本使用
为了能在模板中使用，这些组件必须**先注册以便 Vue 能够识别**。
有两种组件的注册类型：**全局注册**和**局部注册**
组件命名
可使用驼峰(camelCase)或者横线分隔(kebab-case)命名方式
但 DOM 中只能使用**横线分隔**方式进行引用组件
建议使用**驼峰方式**，适用性更强，DOM中使用组件时要转换成短横线方式。
## 全局组件
一般把网页中特殊的公共部分注册为全局组件：轮播图、分页、通用导航栏
全局注册之后，可以在任何新创建的 Vue 实例 (new Vue) 的模板中使用
### 创建组件的方式
### 组件构造器
1创建组件构造器:**Vue.extend({})**
2注册已经创建好的组件:**Vue.component(" abc", 构造器);**
3使用注册好的组件：<abc></abc>
**注意点：**
vue2.x仅支持：单个根元素，最外层要有个<div>包裹
**模板支持指令语法**
模板字符串（反引号``）需要浏览器提供支持（ES6语法），学了前端工程化就不需要关注这个问题了。
3 ==在组件中data是个函数，vue的data是个对象。==
==函数形成闭包环境，保证每个组件有独立的数据==。
## 局部组件
自定义全局组件：在任何一个Vue实例控制的区域中都可以使用
自定义局部组件：只能在自定义的那个Vue实例控制的区域中可以使用
3.如何自定义一个局部组件
在vue实例中新增属性**components**: {}
在{}中通过key/vue形式注册组件
## 组件中的data和methods
组件是可复用的 Vue 实例，不需要手动实例化
与 new Vue 接收相同的选项，例如 **data 、 computed 、 watch 、 methods 等**
组件的 data 选项必须是一个函数 （vuejs首页 => 起步 => 组件基础
## 组件切换
1. v-if切换： v-if的方式来切换视图: 创建和销毁(导致组件的状态不能留存)
2. v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态)
## 动态组件
通过v-if/v-else-if/v-else确实能够切换组件
但是在Vue中切换组件还有一种更专业的方式（vuejs官网=》起步=》组件基础=》动态组件）
component可以配合**keep-alive**来保存被隐藏组件隐藏之前的状态，保持这些组件的状态，以避免反复重新渲染导致的性能问题
### 什么是父子组件?
在一个组件中又定义了其它组件就是父子组件
### 如何定义其它的父子组件
前面我们说过, 自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components
4.父子组件数据传递
在Vue中子组件是不能访问父组件的数据的,
如果子组件想要访问父组件的数据, 必须通过父组件传递
如何传递数据
1. 在父组件中通过v-bind传递数据
==传递格式 v-bind:自定义接收名称 = "要传递数据的变量名"==
2. 在子组件中通过props接收数据
==接收格式 props: ['自定义接收名称1','自定义接收名称2']==
## props 注意点：
props 只用于**父**组件**向子**组件传递数据（单向）。
只有在props中声明的变量子组件才能使用。
|
