总结: Vue2中基础语法(三)

总结: Vue2中基础语法(一)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(二)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(四)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(五)_hmxs_hmbb的博客-CSDN博客

这里总结动态组件和组件_插槽

目录:

        1.props校验

        2.动态组件component

        3.keep-alive组件

        4.keep-alive指定缓存

        5.默认插槽

        6.具名插槽(多个)

        7.作用域插槽

        8.自定义指令

        9.自定义指令(传值和更新)

1.props校验

        props出现在父传子的情况下, 一般是我们有两种格式书写:

        ①简单的格式(使用数组去接收) props: ['属性1', '属性2', ......]

        ②使用严谨的格式(使用对象接收, 校验)  props: { type: 数据类型, default: 默认值, required: 必须传值 }

        所以在实际的开发中, 我们多数会使用严谨的格式; 因为没有类型校验会出现很多莫名其妙的bug.

        复杂数据类型设置默认值的时候, 通常赋值为空数组或空对象; 因为如果直接修改父或者更上一层传输过来的数据的话, 一修改所有的数据都变了.

2.动态组件component

        component动态组件是一个内置的组件, 其中的is属性是动态的将哪个组件挂载到里面.

        它可以做出类似tab栏切换的效果.

格式:

        <component is="组件"> <component>

3.keep-alive组件

        它是用来设置组件的缓存, 它在配合component使用的时候; 当tab栏切换的时候, 被切换的上一个组件会被销毁掉, 只让当前的组件缓存.

        component不好的地方是, 比如是一个用户注册的页面; 当我们把第一页信息填完到第二个页面去; 发现第一页信息填错了, 再返回去的时候信息全部消失了.

        所以说就需要keep-alive组件. 直接使用keep-alive将component包裹即可. 添加后会出现两个生命周期钩子函数(activated-激活, deactivated-失去激活)

        当然它也有不好的地方, 当你切换一个组件就会在内存中假如缓存; 缓存太多会有隐患.

结构:

        <keep-alive include=""或:include="['']">

                <component :is="组件名"> <component>

        <keep-alive>

 

4.keep-alive指定缓存

        它可以指定让某个或多个组件加入缓存. include中的组件名以在component对象中注册的组件名为主.

结构:

        <keep-alive include="组件1, 组件2......">

        <keep-alive :include="['组件1', '组件2', ......]">

5.默认插槽

        就是在定义组件的时候, 把不确定的部分设置为插槽. 也就是在定义组件的时候挖一个坑, 然后再使用这个组件的时候再把这个坑给填上.

        如果没有坑, 但是父组件往里面填了; 页面上什么都会不显示.

        当然在定义的时候, 可以设置默认值; 如果我们在使用的时候不填坑就显示默认值.

        填坑必须使用双标签.

结构:

       子组件定义: <slot>默认内容</slot>

        父组件填坑: <子组件> 填坑的内容 </子组件>

6.具名插槽(多个)

        就是这个插槽是有名字的, 在使用过的时候需要携带指定过的名字才能填坑

格式:

        定义: <slot name="名字">默认内容</slot>

        使用: <子组件><template :v-slot:"名字"></template></子组件>

        或

                <子组件><template #名字></template></子组件>

 

7.作用域插槽

        就在挖坑的时候绑定了一些数据, 然后在填坑的时候可以把这些数据拿到; 且可以使用.

8.自定义指令

        当内置的指令不够用时就可以使用自定义指令来拓展功能.

9.自定义指令(传值和更新)

        直接在自定义指令后面传值即可.