Laravel - Blade Templates - Accessing Parent Data

Sometimes you may want to access data from a parent component inside a child component. In these cases, you may use the @aware directive. For example, imagine we are building a complex menu component consisting of a parent <x-menu> and child <x-menu.item>:


The <x-menu> component may have an implementation like the following:

    @props(['color' => 'gray'])
    merge(['class' => 'bg-'.$color.'-200']) }}> {{ $slot }}

Because the color prop was only passed into the parent (<x-menu>), it won't be available inside <x-menu.item>. However, if we use the @aware directive, we can make it available inside <x-menu.item> as well:

    @aware(['color' => 'gray'])
  • merge(['class' => 'text-'.$color.'-800']) }}> {{ $slot }}