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等

    组件可以复用

posted @ 2020-07-27 18:05  小海_macro  阅读(262)  评论(0编辑  收藏  举报