Vue插槽入门

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>