web-dev-qa-db-fra.com

Passer la variable du composant dans un slot

Est-il possible de passer une variable du composant dans un slot. Voici un exemple:

{{-- index.blade.php --}}
@component('slider', ['entities' => [0, 1, 2]])
    @slot('title')
        Slider title
    @endslot
    @slot('slide')
        Slider content no {{ $entity }}
    @endslot
@endcomponent


{{-- slider.blade.php --}}
<h1>{{ $title }}</h1>
<ul>
@foreach($entities as $entity)
    <li>{{ $slide }}</li>
@endforeach
</ul>

Résultat actuel:

Exception: l'entité $ n'est pas définie

Résultat attendu:

<h1>Slider title</h1>
<ul>
    <li>Slider content no 0</li>
    <li>Slider content no 1</li>
    <li>Slider content no 2</li>
</ul>
  • Comment passer la variable $ entity dans le slot de diapositive?
  • Est-il même possible de le faire?
  • Sinon, existe-t-il des alternatives?
laravelcomponentslaravel-blade
9
HubertNNN

Il semble qu'il n'y ait aucun moyen de transmettre des données d'un composant à un contexte d'emplacement. C'est également le cas avec @section/@yield.

Ce que j'ai découvert, c'est le @each fonction. https://laravel.com/docs/5.6/blade#rendering-views-for-collections

Vous devez avoir une autre vue partielle pour le contenu de l'élément de liste (appelée item ici).

{{-- index.blade.php --}}
@component('slider', ['entities' => [0, 1, 2], 'item_view' => 'item'])
    @slot('title')
        Slider title
    @endslot
@endcomponent


{{-- item.blade.php --}}
<li>
  Slider content no $entity
</li>


{{-- slider.blade.php --}}
<h1>{{ $title }}</h1>
<ul>
  @each($item_view, $entities, 'entity')
</ul>

Exemple: création d'un nouveau curseur avec un contenu différent:

{{-- gallery.blade.php --}}
@component('slider', ['entities' => ['a.png', 'b.png', 'c.png'], 'item_view' => 'gallery_item'])
    @slot('title')
        Gallery
    @endslot
@endcomponent


{{-- gallery_item.blade.php --}}
<li>
  <img src={{ $entity }} />
</li>
2
Kalabasa

MISE À JOUR: J'ai créé un package ajoutant une fonctionnalité de portées étendues à Blade. Votre problème est un cas d'utilisation parfait pour les emplacements délimités et il peut être facilement résolu en les utilisant. Vérifiez-le .

J'ai eu du mal avec le même problème et j'ai finalement trouvé un moyen de "passer" des variables du composant au slot. L'astuce consiste à utiliser @verbatim directive qui rend le code de lame non compilable. Par conséquent, nous pouvons passer du code de lame à un emplacement, puis le compiler dans notre composant. Cependant, il n'y a qu'une seule condition - le nom de la variable utilisée dans la boucle foreach doit être le même que celui utilisé dans le slot. (Comme illustré dans l'exemple ci-dessous - l'emplacement slide utilise $entity variable ainsi que la boucle foreach dans le composant)

index.blade.php 

@component('slider', ['entities' => [0, 1, 2]])
  @slot('title')
    Slider title
  @endslot

  @slot('slide')
    @verbatim
      Slide {{ $entity }}

      @if ($entity === 0) {{-- Directives also work! --}}
        <strong>Special slide</strong>
      @endif
    @endverbatim
  @endslot
@endcomponent

slider.blade.php 

<h1>{{ $title }}</h1>
<ul>
  @foreach($entities as $entity)
    <li>{!! eval('?>'.Blade::compileString($slide)) !!}</li>
  @endforeach
</ul>

C'est une petite solution "hacky" au problème, mais surtout, il fait le travail comme vous pouvez le voir sur la capture d'écran ci-dessous.

The result of the code above

0
Konrad Kalemba

Nous pouvons essayer de différentes manières. Ici, comment j'ai exécuté.

{{-- index.blade.php --}}
@component('slider', ['entities' => [0, 1, 2]])
      @slot('title')
          Slider title
      @endslot
      @slot('slide')
          Slider content no 
      @endslot
  @endcomponent

                    
{{-- slider.blade.php --}}                    
<h1>{{ $title }}</h1>
<ul>
@foreach($entities as $entity)
    <li>{{ $slide }} {{ $entity }}</li>
@endforeach
</ul>
0
Narayan Adhikari