vue在2.5版本以后，貌似就将slot改为slot-scope了，刚开始对他的感觉就是，这个有啥作用啊，基本就瞟了一眼他的定义就过去了，后来在项目中发现他的作用还挺大的。

基本用法

//父组件
<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <test-slot>
            <div class="template">
              <ul>
                  <li>我是匿名插槽的内容</li>
              </ul>
            </div>
        </test-slot>
    </div>
</template>
<script>
import TestSlot from '../components/dateTable/TestSlot'
export default {
    components:{
        TestSlot
    }
}
</script>

//子组件
<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>
<script>
export default {
    
}
</script>

结果: 

如果将子组件中的slot去掉，那么插槽的内容就不会被显示，所以插槽的内容到底可不可见，还是看是否引用了插槽。

通过上面的，我们可以知道插槽就是在组件里面插入了一段html模板，里面模板的格式和样式都是可以根据自己来定义，可能这样你们不觉得有多大的作用，我也一样~但是我们如果想对某一个列表的某个单元格或者元素进行操作，或者获取当前元素的内容，这个有很有必要拉。

作用域插槽

此插槽是我经常会用到的，他的作用是只负责对父组件的数据操作，至于样式什么的，都是由他的父组件来决定。下面的例子就是这样。

<el-table-column
                fixed
                prop="areaname"
                :label="areaname"
                width="120"
                >
                <template slot-scope="scope">
                      <span @click="toDeep(scope.row.areaname,scope.$index)" 
                                    :class="{'isBlue':scope.$index != '0' && activeName != 'third' 
                                    && scope.row.areaname != '浙江全省' 
                                    && scope.row.areaname != '浙江浙中' && scope.row.areaname != '浙江杭嘉'
                                    && scope.row.areaname != '江苏全省' && scope.row.areaname != '江苏苏北'}">
                                    {{ scope.row.areaname }}
                      </span>
                </template>
</el-table-column>

上面代码，就是对表格的某一列进行操作，在el-table-column下插入span标签，即每个单元格下插入span,并绑定绑定click事件，template上绑定从el-table-column传过来的数据scope，他返回的是一个对象，row返回的是当前行下的数据。这样我们可以很方便的对每个单元格进行操作，改变不同的样式，是不是很方便。具体的自己可以打印下scope及其row的值