业务场景:
当组件内某一部分标签不确定
作用:
1.让组件的复用性更强, 灵活度更高
2.组件内部标签不确定时, 可以通过插槽传入
用法:
基本使用
-
在子组件中使用 slot 标签占位
-
在父组件中传入标签替换 slot
默认内容
在 slot 中设置默认内容
具名插槽
业务场景: 组件中多个地方需要用到插槽,此时以name属性区分
- 在 slot 上使用 name 属性设置名称
<slot name="body"></slot>
- 在父组件中使用时, 需要用 template 标签包裹要替换的标签
<template v-slot:body>
<div></div>
</template>
- 在 template 标签上使用 v-slot 指令设置 name
<template v-slot:body> </template>
语法:
v-slot:名称 简写 #名称 <template #body> </template>
作用域插槽
业务场景: 使用组件插槽技术时, 需要用到子组件内变量
- 在 slot 上绑定要传递的数据
<slot :row="data"></slot>
- 在 template 上使用 v-slot 接收
<template v-slot="scope"></template>
具名插槽 + 作用域插槽
业务中一般都是两种插槽搭配使用
语法:
<template #body="scope"></template>
注: v-slot 必须写在 template 标签上
