这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战
一、插槽
插槽的意义是把Vue实现的部分内容分发给API，多用于复合组件开发，经常在elementui这样的第三方框架中体现，有时候例如表格不能完全复合我们的开发设计需求，就需要使用插槽来实现。
匿名插槽
就是默认插槽，这个插槽没有命名，用法就是在组件内部定义slot占位符，然后在使用组件的时候把需要展示的内容传入进去，最后在真正渲染的时候会把传入的内容替换slot占位符。
//Button组件
<div>
<slot></slot>
</div>
//父组件
<Button>hello</Button>
具名插槽
简单来说就是给插槽定义一个名字，并且slot对应的内容都会和组件中的name对应，会把具体内容分发到子组件的指定位置。
例如一个组件中有很多个插槽，每一个插槽都必须要对应一个外部传入的内容，这时就需要用name进行插槽的定义和区分，如果使用没有定义的插槽传入的时候需要使用v-solt:default表示匿名插槽，有名字的插槽就使用参数传入v-slot:name
//Button组件
<div>
<slot></slot>
<slot name="content"></slot>
</div>
//父组件
<Button>
<!-- 默认插槽⽤default做参数 -->
<template v-slot:default>具名插槽</template>
<!-- 具名插槽⽤插槽名做参数 -->
<template v-slot:content>内容...</template>
</Button>
作用域插槽
在组件上的属性，分发内容到子组件中的数据，可以在组件元素内使用，也就是在使用插槽的时候传入一个值，而这个值是指定名称插槽上的所有的属性对象命名slotProps，来访问传进来的值，把子组件的值拿出来在父组件作用域中使用。
//Button组件
<div>
<slot :foo="foo"></slot>
</div>
//父组件
<Button>
<!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
<template v-slot:default="slotProps">
<div>来⾃⼦组件数据：{{slotProps.foo}}</div>
</template>
</Button>
二、举个栗子(冬天的板栗真好吃~)
<el-tree :data="treeData" @node-click="handleNodeClick" icon-class='el-icon-plus'> <div class="custom-tree-node flex" slot-scope="{ node,data }"> <div class="treeLabel">{{ node.label }}</div> <div class="treeNum" v-if="data.idx == 1">(<span class="red">{{data.children.length}}</span>)</div> </div></el-tree>
这是elementui中树形菜单组件，第一级后面有展示子节点的数量，如果完全用框架中的例子就无法实现，所以我们在el-tree下加div实现具体内容，并且加了slot-scope带入参数。
好啦今天过生日，不加班，祝自己生日快乐，哈哈~
