04-Vue组件插槽

动态组件

目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件

什么是动态组件?

在同一个挂载点,可以切换显示不同组件

如何使用动态组件?

vue内置的component组件,配合is 属性

如何切换?

改变is属性值,为要显示的组件名 <component :is="comName"></component>

组件缓存

目标: 组件切换会导致组件被频繁销毁和重新创建,性能不高

解决方法: 使用vue内置的 keep-alive组件,把包起来的组件缓存起来

1. activated – 获得激活状态

2. deactivated – 失去激活状态

组件插槽

当组件内某一部分标签不确定?  用插槽技术

如何使用?

1.先在组件内使用slot占位    <slot>我是默认内容</slot>

2.在使用组件时,传入具体标签插入,替换掉slot显示

具名插槽

目标:当一个组件内有两处以上需要外部传入标签的地方

要求:v-slot一般用跟template 标签使用 (template是h5新出的标签内容模板元素,不会渲染到页面上,一般被vue解析内部标签)

总结:slot的name属性起插槽名,使用组件时,template配合#插槽名传入具体标签

<template v-slot:cotent04></template>

<template #cotent04></template>

作用域插槽 

目标:子组件里值, 在给插槽赋值时在父组件环境下使用

总结:子组件内变量绑定在slot上,然后使用组件template配合v-slot=变量,变量上就会绑定slot身上属性和值

为什么使用作用域插槽?

使用组件插槽技术是,需要用到子组件内的变量

1 .作用域插槽使用的是具名插槽 简写方式 #name='接收变量'
<Panel >
    <!-- <slot name="area" :row="obj">{{ obj.id }}</slot> -->                
    <!-- scope:{ row:obj}  scope变量会自动绑定slot上所有的属性和值 -->                    
    <template #area="scope">                        
        <p>{{ scope.row.name }}</p>                    
    </template>                
</Panel>
2 .可以解构传过来的对象,直接得到传过来的数据
<Panel>     
    <!-- <slot :list="arr"></slot> -->     
    <template v-slot="{list}" >          
        <p v-for="item in list" :key="item" :class="{red:item==2}">{{item}}</p>     
    </template>
</Panel>