【总结】Vue 组件升级 - 插槽

业务场景:

当组件内某一部分标签不确定

作用:

1.让组件的复用性更强, 灵活度更高

2.组件内部标签不确定时, 可以通过插槽传入

用法:

基本使用

1. 在子组件中使用 slot 标签占位

2. 在父组件中传入标签替换 slot

默认内容

在 slot 中设置默认内容

具名插槽

业务场景: 组件中多个地方需要用到插槽,此时以name属性区分

1. 在 slot 上使用 name 属性设置名称

<slot name="body"></slot>

2. 在父组件中使用时, 需要用 template 标签包裹要替换的标签

<template v-slot:body> 
    <div></div>
</template> 

3. 在 template 标签上使用 v-slot 指令设置 name

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

语法:

 v-slot:名称  简写 #名称 <template #body> </template> 

作用域插槽

业务场景: 使用组件插槽技术时, 需要用到子组件内变量

1. 在 slot 上绑定要传递的数据

<slot :row="data"></slot>

2. 在 template 上使用 v-slot 接收

<template v-slot="scope"></template> 

具名插槽 + 作用域插槽

业务中一般都是两种插槽搭配使用

语法:

<template #body="scope"></template> 

注: v-slot 必须写在 template 标签上