Vue组件,props验证类型、内容分发

143 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第19天,点击查看活动详情

组件名

规则:
    1、全部小写
    2、包含连字符 (及:即有多个单词与连字符符号连接)

类型:全局组件、局部组件、单文件组件

单文件组件

单文件组件中的data是一个有返回值的函数对象
在单文件组建中新增了expose用来接收

props验证类型

如果props是一个对象,不是字符串数组时,他包含验证:
    验证类型:
        string、number、boolean、function、object、array

内容分发

为了组件可以组合,我们需要一种方式来混合父组件内容与子组件自己的模板,这个过程被称为内容分发
    简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在那个地方显示、如何显示、就是
slot分发负责的
    vue使用特殊的<slot>元素作为原始内容的插槽
    默认情况下父组件在子组件内套的内容是不显示的
    使用单个插槽,可以将父组件放在子组件的内容
    即使有多个标签,会一起被插入,相当于用父组件放在子组件里的标签替换了<slot></slot>这个标签

动画

vue里自己封装了专门放动画的组件叫做<transition>,如果是一系列的动画放在<transition-group>
使用:
    在css中设置动画
    使用vue中的动画库(animate.css、veloctity.js)
    使用钩子函数在js中设置动画(效果与使用css相同)