其它示例

插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。

例如，我们要实现一个 <todo-list> 组件，它是一个列表且包含布局和过滤逻辑：

  1. <ul>
  2.   <li
  3.     v-for="todo in filteredTodos"
  4.     v-bind:key="todo.id"
  5.   >
  6.     {{ todo.text }}
  7.   </li>
  8. </ul>

我们可以将每个 todo 作为父级组件的插槽，以此通过父级组件对其进行控制，然后将 todo 作为一个插槽 prop 进行绑定：

  1. <ul>
  2.   <li
  3.     v-for="todo in filteredTodos"
  4.     v-bind:key="todo.id"
  5.   >
  6.     <!--
  7.     我们为每个 todo 准备了一个插槽，
  8.     将 `todo` 对象作为一个插槽的 prop 传入。
  9.     -->
  10.     <slot name="todo" v-bind:todo="todo">
  11.       <!-- 后备内容 -->
  12.       {{ todo.text }}
  13.     </slot>
  14.   </li>
  15. </ul>

现在当我们使用 <todo-list> 组件的时候，我们可以选择为 todo 定义一个不一样的 <template> 作为替代方案，并且可以从子组件获取数据：

  1. <todo-list v-bind:todos="todos">
  2.   <template v-slot:todo="{ todo }">
  3.     <span v-if="todo.isComplete">✓</span>
  4.     {{ todo.text }}
  5.   </template>
  6. </todo-list>

这只是作用域插槽用武之地的冰山一角。想了解更多现实生活中的作用域插槽的用法，我们推荐浏览诸如 Vue Virtual Scroller、Vue Promised 和 Portal Vue 等库。