diff --git a/blade.md b/blade.md index 3b615cd05d1..865ca0c7ee6 100644 --- a/blade.md +++ b/blade.md @@ -1037,6 +1037,38 @@ You may specify which attributes should be considered data variables using the ` Given the component definition above, we may render the component like so: + + +#### Accessing Parent Data + +Sometimes you may want to access data from a parent component inside a child component. In these cases, you can use the `@aware` directive to make outside data available inside the component. + +For example, imagine we are building a complex menu component consisting of a parent `` and child `` that would be used like so: + + + ... + ... + + +Given the above usage, here's what the `` component might look like: + + + + @props(['color' => 'gray']) + +
    merge(['class' => 'bg-'.$color.'-200']) }}> + {{ $slot }} +
+ +Because the `$color` prop was only passed into the parent ``, it won't be available inside ``. However, if we use the `@aware` directive, we can make it available inside `` as well: + + + + @aware(['color']) + +
  • merge(['class' => 'text-'.$color.'-800']) }}> + {{ $slot }} +
  • ### Dynamic Components