1、认识插槽
我们开发中通常会通过props传递给组件一些数据，让组件来进行展示，但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素，比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片，我们应该让使用者可以决定某一块区域到底存放什么内容和元素。所以有了插槽的存在，我们可以提高组件的复用性，并且也提高组件的灵活性。
1、插槽的分类
插槽有四种：默认插槽、默认作用域插槽、具名插槽、具名作用域插槽。
2.1默认插槽:
作用: 父组件传递 html结构 给子组件
父组件(传)：<子组件> html结构 </子组件>
子组件(收): <slot> 默认结构 </slot>
2.2默认作用域插槽：
作用: 父组件可以拿到子组件的数据并且在父组件加工处理之后在传递给子组件
父组件(传)：<template #default="{ row }"> html结构{{ row.xxx }} </template>
子组件(收): <slot v-bind:row="{xxx:''}"></slot> 或者
父组件(传)：<template #default="{ scope }"> HTML{{ scope.row.xxx }} </template>
子组件(收): <slot v-bind:row="{xxx:''}"></slot>
3.1具名插槽：
父组件(传)：<子组件><template #xxx >html结构</template></子组件>
子组件(收): <slot name="xxx"></slot>
3.2具名作用域插槽：
父组件(传)：<子组件><template #xxx="{ row }" >html结构{{ row.title }}</template> </子组件>
子组件(收): <slot name="xxx" v-bind:row="{ title:' ' }"> 默认结构 </slot>
