介绍作用域插槽之前，先介绍一下Vue中的slot内容分发

    1. <body>
    3.     <child-component>
    4.       <p>分发的内容</p>
    5.       <p>分发更多的内容</p>
    6.     </child-component>
    7.    <script src=".public/vue.js"></script>
    8.    <script>
    9.      vue.component('child-component',{template:`<div class="container>
    10.      <slot>
    11.       <p>父组件没有插入内容，我将被显示</p> //相当于默认显示的内容
    12.      </slot>
    13.      </div>`})
    14.   </script>
    15. </body>

    如果没有中间两段p标签内容的话，父组件会显示子组件中定义的slot中p标签的内容，但是如果存在传入的内容，则会在slot中显示父组件传入的内容，这里slot是备用内容，作用域是子组件本身。

    插槽：
    插槽，也就是slot其实是一块HTML模版，这块模版显示与不显示，以及怎样显示由父组件决定，插槽模版slot其实是一个空壳子，因为它的显示与隐藏，以及最后使用怎样的html模版显示由父组件控制。但是插槽显示的位置由子组件决定，slot写在组件的template的哪块，父组件传过来的模版将来就显示在哪块。这样就显得组件的复用性更高，更加灵活。我们随时可以通过父组件给子组件传一些额外需要的内容

    作用域插槽：
    插槽可以控制html模版的显示与不显示，作用域插槽实际上就是带数据的插槽，父组件可以通过绑定数据传递给子组件，作用域插槽就可以通过子组件绑带数据传递给父组件。

    1. <ul>
    2.   <li
    3.   v-for="todo in todos"
    4.   v-bind:key="todo.id"
    5.  >
    6.   <!-- 我们为每个 todo 准备了一个插槽，-->
    7.   <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
    8.   <slot v-bind:todo="todo">
    9.    <!-- 回退的内容 -->
    10.    {{ todo.text }}
    11.   </slot>
    12.  </li>
    13. </ul>
    15. <todo-list v-bind:todos="todos">
    16.  <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
    17.  <template slot-scope="slotProps">
    18.   <!-- 为待办项自定义一个模板，-->
    19.   <!-- 通过 `slotProps` 定制每个待办项。-->
    20.   <span v-if="slotProps.todo.isComplete">✓</span>
    21.   {{ slotProps.todo.text }}
    22.  </template>
    23. </todo-list>

    slot-scope就相当于是一个对象，这个对象里面的数据就是子组件绑定插槽传入父组件得到的，vue2.5+slot-scope不再限制在template元素上使用，而是可以用在插槽内的任何元素及组件上。

    作用域插槽的使用场景：
    既可以服用子组件的slot，又可以使slot内容不一致。