# Components

• Slots
• Slot Attributes
  • Conditionally Merge Attributes
  • Trouble Shooting
  • Component not accepting parameters
  • Attributes are not forwarding to component layout
  • Component won't accept boolean value?

# Slots

<x-slot name="title"> ... </x-slot>

# Slot Attributes

<div {{ $heading->attributes }}>
    {{ $heading }}
</div>

<div {{ $heading->attributes->merge(['class' => 'alert']) }}>
    {{ $heading }}
</div>

# Conditionally Merge Attributes

<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
    {{ $message }}
</div>

# Trouble Shooting

# Component not accepting parameters

Run php artisan optimize:clear

# Attributes are not forwarding to component layout

Check to make sure the layout has a $slot to pass the attributes too.

# Component won't accept boolean value?

PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix:

<livewire:my-component :myBool=true> -NOT- <livewire.my-component myBool=true>