vue 作用域插槽

作用域插槽

作用域插件的目的就是：獲取本組件的數據！。

示例代碼todo-list組件：

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

即在slot中可以使用本組件todo數據。

與父組件：

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

這樣在父組件的寫法多余了：

<template v-slot:todo="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>

因為組件中的slot完全獲取到了todo的數據，
子組件完全可以修改為：

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--
    我們為每個 todo 准備了一個插槽，
    將 `todo` 對象作為一個插槽的 prop 傳入。
    -->
    <slot name="todo" v-bind:todo="todo">
		<span v-if="todo.isComplete">✓</span>
      <!-- 后備內容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

父組件可以不做邏輯判斷了。