搞懂Vue的作用域插槽---从分析到案例演示

作用域插槽：

   就是带数据的插槽，要求在slot上面绑定数据，供将来使用组件时使用 。

为什么需要作用域插槽？

插槽让我们可以自定制内容，但当我们想给插槽注册事件时，发现行不通，因为具名插槽和匿名插槽都是不携带任何数据的，所以根本获取不到数据项的id。

比如这个小demo需求：点击删除按钮，删除对应项：

结构分析： 

插槽里放的是删除按钮，三句歌词是子组件从父组件中接收的，然后遍历数据生成页面。

<script>
  Vue.component('my-music',{
    template:`
    <div>
      <h2>歌词收录</h2>
      <ul>
        <li v-for='item in music'>  //遍历接收到的内容进行渲染视图
           <slot></slot>            //匿名插槽，用来存放删除按钮
        </li>
      </ul>
    </div>
    `,
    props:['music']   //用来接收父组件的值
  })
const vm