Vue 组件反刍

## 组件

    对局部视图的封装，为了实现复用，组件有结构、样式、行为

    自定义元素。扩展原生HTML

## 组件的注册

    全局注册 Vue.component('名字',{template})

    局部注册 通过compones选项定义

    注意：组件的模板template是必选的，并且有且只有一个根元素

## 详解组件

+ 组件命名规则

    keybab-case:短横线连接单词的命名方式，使用时候采用keybab-case.

    camelCase:大驼峰命名，从首字母开始大写，[Dom操作元素]时候使用keybab-case,

        但是在字符串模板中[template]用camelCase\keybab-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接受相同地选项：如data\computed\methods等

    组件可以复用