Pass some data into a slot from the main component

[dlnsk]

Now the slot has access only to whole its component. It's nice but not enough if the slot is used in loop. Vue's scoped slot is example of how data is passed into slot.

A suggestion is to add a method to ComponentSlot object and use it like:

<!-- /resources/views/components/list.blade.php -->
 <ul>
    @foreach($cars as $car)
        {{ $item->withBag($car) }}  //<-- ComponentSlot's method withBag pass data to slot named 'item'
    @endforeach
</ul>

In the slot we have a variable with predetermined name slotBag which contains passed data:

<x-list>
    <x-slot name="item">
        <li><a href="{{ route('cars.show', $slotBag->id) }}">{{ $slotBag->title }}</li>  <-- using passed data
    </x-slot>
</x-list>

It'll be really useful for lists and tables where every item has a set of own actions (show, edit, delete).