敢问vue"作用域插槽"的真实应用场景有哪些？

Question

在vue官方文档中看到vue v2.1.0新增作用域插槽，文档中说明的使用方法和案例我都看明白了，但无法理解该案例的用意：

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项：

<my-awesome-list :items="items">
  <!-- 作用域插槽也可以在这里命名 -->
  <template slot="item" scope="props">
    <li class="my-fancy-item">{{ props.text }}</li>
  </template>
</my-awesome-list>

列表组件的模板：

<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- fallback content here -->
  </slot>
</ul>

我对这个案例的理解是：子组件从数据源中获取数据，然后回传给父组件来做样式层面的渲染。这跟我的认知有冲突，难道不是应该父组件获取数据后，再交给子组件来渲染的吗？

敢问大家是怎么理解官方给出的这个案例的呢？另外，能否介绍一下在实际项目中对此特性的应用场景？

补充：我是明白slot的用意的，我只是不明白为什么既然在slot机制下，slot部分的控制权已经完全交给父组件了，还要提供子组件的属性供父组件来使用。

Answer 1

比如你写了一个对话框组件，发布后，你的使用者想自定义标题部分的样式或内容，比如显示很多自己定义的按钮。
此时，你就需要使用这个功能了。
其实这个功能，就是做到了更灵活。

抛砖引玉吧。

Answer 2

普通的slot，在parent中访问不到child的数据。Scoped Slots可以。

官方的例子，一个列表，不同的场景有不同的具体展示方式，但数据是相同的。这时可以把列表定义成抽象的，类似interface，具体的implement在使用的时候(parent中)确定。

<list-comp>
    <header> title </header>

    <ul>
     <slot name="item" v-for="item in items" :text="item.text">
       <!-- 具体的列表展示形式在parent中使用slot -->
     </slot>
    </ul>

    <footer>other things<footer>
<list-comp>