插槽（slot），是组件的一块HTML模板，这块模板显示不显示，怎么显示由父组件来决定。

    为什么需要slot-scope 因为子组件有时候需要把data传递给父组件

    比如一个表格组件 我们把Ajax请求而来的数据传递给Table组件 但是有需要我们需要自定义内容 自定义的内容需要展示不同的数据 这时候需要对应的data-item 这个data-item在哪里可以获取得到的 就是Table组件内部 所以这时候父组件需要从子组件获取数据

    1. <template>
    2.   <div class="father">
    3.     <h3>这里是父组件</h3>
    4.     <!--第一次使用：用flex展示数据-->
    5.     <child>
    6.       <template slot-scope="user">
    7.         <div class="tmpl">
    8.           <span v-for="item in user.data">{{item}}</span>
    9.         </div>
    10.       </template>
    12.     </child>
    14.     <!--第二次使用：用列表展示数据-->
    15.     <child>
    16.       <template slot-scope="user">
    17.         <ul>
    18.           <li v-for="item in user.data">{{item}}</li>
    19.         </ul>
    20.       </template>
    21.     </child>
    23.     <!--第三次使用：直接显示数据-->
    24.     <child>
    25.       <template slot-scope="user">
    26.        {{user.data}}
    27.       </template>
    29.     </child>
    31.     <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
    32.     <child>
    33.       我就是模板
    34.     </child>
    35.   </div>
    36. </template>
    • v-slot 替代 slot slot-scope这些属性

    • slot-scope 子组件把数据交给父组件

    • 插槽组件 和 插槽属性 slot slot-scope 还是不同的

    image.png

    https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md

    这个rfc提案说的是

    1. <foo>
    2.   <template slot-scope="{ msg }">
    3.     <div>{{ msg }}</div>
    4.   </template>
    5. </foo>

    When we first introduced scoped slots, it was verbose because it required always using