Question

我是vue.js的初学者。我无法理解guide中的scopeSlots和示例。请给我详细的答案，非常感谢！

Answer 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>

在示例中。

我不明白vue.js的scopedSlots

1 个答案: