## 组件
对局部视图的封装，为了实现复用，组件有结构、样式、行为
自定义元素。扩展原生HTML
## 组件的注册
全局注册 Vue.component('名字',{template})
局部注册 通过compones选项定义
注意：组件的模板template是必选的，并且有且只有一个根元素
## 详解组件
+ 组件命名规则
keybab-case:短横线连接单词的命名方式，使用时候采用keybab-case.
camelCase:大驼峰命名，从首字母开始大写，[Dom操作元素]时候使用keybab-case,
但是在字符串模板中[template]用camelCasekeybab-case均可以
-当命名为：大驼峰时，在字符串模板中两种方式均可
-而当命名为：keybab形式时，则只能使用kebab-case
结论：拿捏不准:均保持keybab在使用的时候！命名名称：均支持
Note：
html 标签名不区分大小写！
+ 使用组件方式
单闭合：该标签之后的所有的组件都不会被渲染。[渲染到单闭合组件为止]
双闭合：推荐使用
+ 组件模板
1. 组件的模板template是必选的，并且有且只有一个根元素
2. 当template属性包含元素比较多情况下，可以使用template标签来定义模板，通过id来表示组件模板信息
+ 组件的data选项必须是一个函数：[为了让组件之间相互独立，每个组件维护自己的一份数据]
维护组件的独立性
+ 插槽slot
组件的一块HTML模板，相当于占位符，以后显示不显示内容由父组件决定！
v-slot can only be used on components or <template>.
v-slot简写形式：#[name 的值]
+ 组件间的数据通信
父->子
1 在父组件中通过给子组件增加属性+值[父组件数据]方式传递数据
2 在子组件中通过props选项：数组得形式显示得声明
"props": expected an Array or an Object!
注意：
- props中声明得属性和data一样，是响应式数据，也会挂载组件实例中，可控制视图渲染
- 父组件传递的属性名是
-kebab-case格式，props中可以通过camelCase或PascalCase
-如果是camelCase，则浏览器会将其解析为全部小写！
- props选项可以进行数据校验：
1 指定属性的类型，默认情况下全部按照String类型处理；
假如想使用值本身，固有类型则需要使用v-bind：绑定
还支持校验数据是否是规定得类型
-Invalid prop: custom validator check failed for prop "title".
2 class和样式合并
3 vue的单向数据流
加载渲染过程：父beforeCreated -> 父created -> 父beforeMount -> 子beforeCreated -> 子created -> 子beforeMount
->子mounted ->父mounted
子组件更新过程：父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
子->父
1 子组件调用$emit()方法发布一个事件
2 父组件监听事件
## note
根实例：根组件
每一个组件都可以视为一个VueComponent实例,VueComponent继承Vue,所以组件能够与new Vue接受相同地选项：如datacomputedmethods等
组件可以复用