<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    <!-- 我們為每個 todo 準備了一個插槽，-->
    <!-- 將 `todo` 對象作為一個插槽的 prop 傳入。-->
    <slot v-bind:todo="todo">
      <!-- 回退的內容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>
 

<todo-list v-bind:todos="todos">
  <!-- 將 `slotProps` 定義為插槽作用域的名字 -->
  <template slot-scope="slotProps">
    <!-- 為待辦項自定義一個模板，-->
    <!-- 通過 `slotProps` 定制每個待辦項。-->
    <span v-if="slotProps.todo.isComplete">?</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>
 

<todo-list v-bind:todos="todos">
  <template slot-scope="{ todo }">
    <span v-if="todo.isComplete">?</span>
    {{ todo.text }}
  </template>
</todo-list>