Vue-slot slot

The components you want to provide contain a reusable slot that can get data from the sub components.

It is hoped that each independent item will render something different. This is also the application of scope slot.

todo-listComponents:

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

To make this feature possible, all you need to do is wrap the to-do items in one<slot> Element and then pass all the data related to its context to this slot:

In this case, the data istodo Object:

<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    <!-- We have prepared a slot for each todo, -->.
    <!-- The `todo` object is imported into prop as a slot. -->
    <slot v-bind:todo="todo">
      <!-- The content of the rollback is -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

Now when we use<todo-list> Components, we can choose to define a different item for the to-do list.<template> As an alternative, and can be passed.slot-scope Features get data from sub components:

<todo-list v-bind:todos="todos">
  <!-- `slotProps` is defined as the name of the slot domain -->
  <template slot-scope="slotProps">
    <!-- Customize a template for the to-do item, -->
    <!-- Customize each to-do item through `slotProps`. -->
    <span v-if="slotProps.todo.isComplete">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>

At 2.5.0+,slot-scope No longer limited<template> Elements can be used on any element or component in a slot.

Deconstruction of slot-scope

If a JavaScript expression is valid at the parameter position defined by a function, the expression can actually beslot-scope Accept. That is, you can use ES2015 to deconstruct syntax in these expressions in supported environments (single file components or modern browsers). For example:

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