1.插槽是什么
(1)作用:让组件内部的一些 结构 支持 自定义
(2)使用场景:组件的内容部分,不希望写死,希望在使用的时候自定义。
(3)插槽分类:默认插槽(组件内定制一处结构)、具名插槽(组件内定制多出插槽)
(4)作用域插槽:是插槽的一个传参语法
2.插槽 - 默认插槽
插槽的语法:
(1)组件内需要定制的结构部分,改用<slot></slot>
进行占位
(2)在其他地方使用组件时, <组件名></组件名>
标签内部, 传入结构替换slot
3.插槽-后备内容(设置默认值)
(1)插槽后备内容:封装组件时,可以为预留的 <slot>
插槽提供后备内容(默认内容)。
(2)语法: 在 <slot>我是后备内容</slot>
标签内,放置内容, 作为默认显示内容
(3)效果:
①外部使用组件时,不传东西,则slot会显示后备内容
②外部使用组件时,传东西了,则slot整体会被换掉
4.插槽 - 具名插槽
(1)具名插槽语法:
①多个slot使用name属性区分名字
②使用template包裹起来分别成为独立的整体,来配合v-slot:名字
来分发对应标签
(2)具名插槽简化语法:#插槽名
5.插槽 - 作用域插槽
(1)作用域插槽: 定义 slot 插槽的同时, 是可以在插槽中传值的。给 插槽 上可以 绑定数据,将来在其他地方使用(定义了插槽的)组件时可以使用插槽的数据。
(2)基本使用步骤:
①给 slot 标签, 以 添加属性的方式传值
<slot :row="item" msg="测试文本"></slot>
②所有添加的属性, 都会被收集到一个对象中
{
row: {id: 2, name: '张三', age: 18 },
msg: '测试文本'
}
③在template中, 通过 #插槽名= "obj"
接收,默认插槽名为 default
<MyTable :data="list">
<template #default="obj">
<button @click="del(obj.row.id)">删除</button>
</template>
</MyTable>