How to make multiple slot in one component?

Hi, I am a little bit confused about how i can use multiple slot in blade component. Lets say , I have the the following layout component:

<!-- Page Content  -->  
<div id="content" class="">  
 <div class="container">  
  <div class="row">  
    <div class="col-md-12">  
      {{$slot}}   
 </div>  
 </div>  
  
  
 </div>  
</div>

I understand my page html will go in to the place of $slot. Now if i also want a slot for page title how would i do that? Should i put this like following:

<!-- Page Content  -->  
<div id="content" class="">  
   <x-slot name="pageHeading">  
     <h1 class="page-heading">{{$pageHeading}}</h1>  
   </x-slot>  
 <div class="container">  
     <div class="row">  
	     <div class="col-md-12">  
		     {{$slot}}  
	     </div>  
     </div>  
</div>  
</div>

Then how would i put the variable while extending the layout. Thanks

Snapey

5 years ago

Best Answer

Level 122

With a named slot

https://laravel.com/docs/8.x/blade#slots

reference the named slot in the view as a variable

{{ $title }}

and pass it to the component with the x-slot directive

    <x-slot name="title">

	Page title here 

    </x-slot>

so in your case

<!-- Page Content  -->  
<div id="content" class="">  
 <h1 class="page-heading">{{$pageHeading}}</h1>  
 <div class="container">  
     <div class="row">  
	     <div class="col-md-12">  
		     {{$slot}}  
	     </div>  
     </div>  
</div>  
</div>

Then in your view that extends the component;

    <x-slot name="pageHeading">
	Page title here 
    </x-slot>

    The rest of your content that goes into $slot

6 likes

Please or to participate in this conversation.