首先简单说下为什么要使用作用域插槽，有时候需要组件带有一个可从子组件获取数据的可复用的插槽。
下面还是通过例子来讲解
一个简单的todo-list组件
Vue.component('todo-list', { props: ['text'], template: ` <ul>
<li v-for="(item, index) of text" :key="index">
<slot :text="item"></slot>
</li>
</ul>
`,
});
我们通过slot元素，使用v-bind的形式绑定属性传递给父元素，父元素通过slot-scope属性来接收属性，下面是上面的一个运用
var vm = new Vue({
el: '#box',
data: {
arr: ['css', 'html', 'javascript'],
},
template: `
<div id="box">
<todo-list :text="arr">
<template slot-scope="boses">
<h2>这是一个标题</h2>
<p>{{boses.text}}</p>
</template>
</todo-list>
</div>`,
});
这里我通过template的slot-scope属性接收solt元素传递的text属性，并在p标签内部引用他，这里提示一下slot-scope的名称可以随意起，引用的时候通过.名称的方式引用。
如果环境ES6+，可以通过解构赋值来简写
<div id="box">
<todo-list :text="arr">
<template slot-scope="{text}">
<h2>这是一个标题</h2>
<p>{{text}}</p>
</template>
</todo-list>
</div>`
Vue2.5.0+，slot-scope不再限制在<template>元素上使用，而可以用在插槽内的任何元素或组件上。
