我无法理解 vue.js 的 scopedSlots答案

【问题标题】：I can't understand scopedSlots of the vue.js我无法理解 vue.js 的 scopedSlots
【发布时间】：2019-03-12 16:51:34
【问题描述】：

我是 vue.js 的初学者。看不懂guide中的scopedSlots和example，能否给个详细的解答，非常感谢！

【问题讨论】：

欢迎来到 Stack Overflow！请参观并阅读帮助中心help center，特别是“我应该避免问哪些类型的问题？” help center 和“我可以在这里询问哪些主题？” help center。您最好的选择是进行研究，在 Stack Overflow 上搜索相关主题，然后试一试。在进行更多研究和搜索后，发布您的尝试minimal reproducible example，并具体说明您遇到的问题，这可以帮助您获得更好的答案！
观看此视频youtube.com/watch?v=GWdOucfAzTo

标签： vue.js

【解决方案1】：

我认为最好用一个使用纯 JavaScript 函数的示例来说明。

把组件想象成一个函数，例如

function todoList(todos) {
  // render <ul>, loop todos, render <li> and todo.text
}

现在假设该函数能够传递一个名为 slot 的可选内容渲染函数

function todoList(todos, slot) {
  slot = slot || slotProps => {
    // render slotProps.todo.text
  }

  // render <ul>

  todos.forEach(todo => {
    // render <li>

    slot({ todo }) // call "slot" function
  }
}

分配给slot的函数相当于

<slot v-bind:todo="todo">
  <!-- Fallback content -->
  {{ todo.text }}
</slot>

来自示例。

所以现在当你调用这个函数时，你可以选择使用类似的东西

todoList(todos, slotProps => {
  if (slotProps.todo.isCompleted) {
    // render a checkmark, eg ✓
  }
  // render slotProps.todo.text
})

这里传入的函数相当于

<template slot-scope="slotProps">
  <!-- Define a custom template for todo items, using -->
  <!-- `slotProps` to customize each todo.            -->
  <span v-if="slotProps.todo.isComplete">✓</span>
  {{ slotProps.todo.text }}
</template>

在示例中。

【讨论】：