vue中的插槽有三种：单个插槽、具名插槽、作用域插槽，这个在官网上能看到
（https://cn.vuejs.org/v2/guide/components.html#单个插槽）
作用域插槽简单来说就是父组件只管显示样式，数据由子组件来提供。比如上面的代码，el-table-column内的template是传递给其内部solt的显示内容，但是scope的值是由el-table-column内部solt绑定的数据返回的。这个数据具体是什么由el-table-column中指定，类似：
<slot name="**" :data="data"></slot>
export default {
data: function(){
return {
data: ['1','2','3','4','5','6']}
},
}
而scope就是上面代码中的data。
昨天看vue的官网文档，在slot-scope这块不是特别的明白，今天自己做了一个小例子，便于理解。
先说一下我们假设的应用常用场景，我们已经开发了一个代办事项列表的组件，很多模块在用，现在要求在 不影响已测试通过的模块功能和展示 的情况下，给 已完成的代办项增加一个对勾效果 。
也就是说，代办事项列表组件要满足一下几点
之前数据格式和引用接口不变，正常展示
新的功能模块增加对勾
解决办法很多，不过为了解释组件作用域插槽，我们就用slot-scope了，写列一下之前组件的代码。
todo-list.vue 组件
<template>
<ul>
<li v-for="item in todoList" v-bind:key="item.id">
<slot v-bind:itemValue = "item" >
{{ item.test }}
</slot>
</li>
</ul>
</template><script>
export default {
name: 'todoList',
props: {
todos: Array
},
data(){
return {
todoList:this.todos
}
}
}
</script>
组件代码
<template>
<ul>
<li v-for="item in todoList" v-bind:key="item.id">
<slot>
{{ item.test }}
</slot>
</li>
</ul>
</template><script>
export default {
name: 'todoList',
props: {
todos: Array
},
data(){
return {
todoList:this.todos
}
}
}
</script>
父组件代码
<template>
<div id="app">
<h2>之前组件调用</h2>
<todo-list v-bind:todos="todosBefore" ></todo-list>
</div>
</template><script>
import todoList from './components/todo-list.vue'
export default {
name: 'app',
data:function(){
return {
todosBefore:[
{
test:'询问时间',
id:12312313123
