Vue.js特性Scoped Slots的浅析

什么是scoped slots

A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.

上面是官方的定义。
作用域插槽（Scoped Slots）是vue.js中一个非常有用的特性，它可以使组件更加通用和复用。唯一的问题是理解起来比较困难。试图去让你理解父与子作用域的交织关系，像解决一道数学难题。
简单点说slot就是插槽，它是可以被替换掉的，替换它的内容是可以拿到当前组件的上下文的
（为了简单起见，以下例子以模板为主）

举个简单的例子

//button.vue
<template>
 <button class="btn">
  <slot></slot> //相当于是占位
 </button>
</template>
 
<script>
export default {
 
}
</script>

//app.vue
<template>
 <div id="app">
 <Button>Buton with text</Button>
 <Button>
 <i class="fa fa-copy"></i>//这里取代了slot的位置
 </Button>
 
 <Button>
 <i class="fa fa-