关于Vue中slot-scope插槽应用详细解读

插槽是vue项目中常见的应用，也是一项对项目组件比较友好的技术，一直想写一篇关于插槽的理解文章，但是碍于比较忙，今天恰好也遇到了，趁着晚上有时间来更一下：

关于vue的三种插槽：
1、匿名插槽
2、具名插槽
3、作用域插槽

前两种用的比较多，我就简单地说一下：

1. 匿名插槽在子组件中给定位置后，在父组件就是直接在写在子组件标签中，它会自动占用子组件给定的位置，一般用于只有一个比较大的自定义的区域。像：

<slot>
  <span  v-if="label" class="label-text">{{ label }}</span>
</slot>

在父组件中可以直接覆盖子组件已有的内容和样式，当然不限于改动较大的，改动小的，但是需要改的地方不多的也适用。

2. 具名插槽，顾名思义每个插槽都有它的名字，像：

<div class="center-content">
   <slot name="sonSlot"></slot>
</div>

一般用于细粒度的组件内容更改，比如子组件中已经占好的坑位，在父组件中进行修改其内容，比如替换掉子组件中已有的图片、文本等。

3. slot-scope 作用于插槽：
   详细的说一下这个，这个平时用到的不是很多，但是非常有用，它能在父子组件间很灵活传递数据，尤其是针对一些列表间强关系性的数据更是不可或缺，比如element-ui的el-table中就大量使用了slot-scope。接下来我们就详细的剖析一下：

举个例子说起，这样更加直观，也方便贴一些伪代码给大家参考，当我们在项目中遇到做一个比较多的列表时一般是怎么想的呢？

• 一般来说简单的列表肯定是前端页面直接v-for遍历原数据给span、p 这类基础标签直接渲染即可。
• 再者这个列表可能是封装好的类cell、list等组件组件，那么同理，外层v-for子组件直接使用:attribute(属性名)="item.value"批量绑定传给封装好的子组件渲染即可。

okay，看似没什么问题，那么问题来了，要是将这些子组件强关联起来呢，就是每个子组件间都是有关系的，比如点击了列表中的某一项，另外一项也要做出相应的动作，比如一个滑动列表，一个滑出来，其他的就得自动滑进去，最简单便捷的实现方法就是直接写个单页面业务组件，每个给个ref，或者根据列表的长度，滑动时批量处理即可，要想封装成组件的基本思路就是，数据从外部传入，关联操作在子组件内部实现。

三种实现方式：

1. 直接写成页面级业务组件让其他的开发者copy使用。
   优点：自定义程度高
   缺点：项目显得臃肿且复用率低，不好维护和风格统一化

2. 封装成内部渲染组件
   优点：直接传一个数据进去即可，简洁方便
   缺点：自定义程度较低，怎么显示，显示什么全靠封装好的子组件说了算

3. 封装成作用域插槽
   优点：自定义程度高，传进去的每一项数据都可以在父组件拿到（当然封装时需暴露），避免组件嵌套导致不好维护或者牵一发而动全身
   缺点：无

子组件：

<div v-for="(item	,index) in listData" :key="index"  >
  <div class="slotWrap">
     <slot
      :index="index"
      :title="item.title"
      :label="item.label"
      />
   </div>
</div>

或者：

<slot  :bind=“item”/>

父组件：

<child :list-data='cellData' @nodeClicked="nodeClicked">
	<template  slot-scope="item">
	   <other-child
	     ref="cell"
	     :title="item.title"
	     @clicked="Clicked(item.index)">
	   </other-child>
	 </template>
</child >

父组件的slot-scope接受的item就是子组件传过来的对象，直接使用即可，也就是它把数据全部传给了组件调用者，任调用者替换、操作、渲染等一系列操作， 不管是从父组件选择什么组件如other-child来渲染数据，或者父组件选择使用哪个参数都大大的增强了灵活度。这种方式尤其在一些整体性强、高可迭代性、自定义的列表的项目中尤为适用。