From 5074698c52cb6098937276782034ea6dbf2d2d29 Mon Sep 17 00:00:00 2001 From: Caleb Porzio Date: Tue, 5 Oct 2021 19:25:46 -0400 Subject: [PATCH 1/2] Add docs for `@aware` --- blade.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/blade.md b/blade.md index 3b615cd05d1..154750740e3 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 with a parent `` and child `` that would be used like so: + + + ... + ... + + +Here's what the `` component might look like: + + + + @props(['color' => 'gray']) + +
    merge(['class' => 'bg-'.$color.'-200']) }}> + {{ $slot }} +
+ +In order to access the `$color` property passed into `` from ``, you will need to use the `@aware` directive: + + + + @aware(['color']) + +
  • merge(['class' => 'text-'.$color.'-800']) }}> + {{ $slot }} +
    • ### Dynamic Components From 0105c634b981deabfdadaf6efef98f421db3666d Mon Sep 17 00:00:00 2001 From: Caleb Porzio Date: Tue, 5 Oct 2021 19:33:18 -0400 Subject: [PATCH 2/2] Update blade.md --- blade.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blade.md b/blade.md index 154750740e3..865ca0c7ee6 100644 --- a/blade.md +++ b/blade.md @@ -1043,14 +1043,14 @@ Given the component definition above, we may render the component like so: 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 with a parent `` and child `` that would be used like so: +For example, imagine we are building a complex menu component consisting of a parent `` and child `` that would be used like so: ... ... -Here's what the `` component might look like: +Given the above usage, here's what the `` component might look like: @@ -1060,7 +1060,7 @@ Here's what the `` component might look like: {{ $slot }} -In order to access the `$color` property passed into `` from ``, you will need to use the `@aware` directive: +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: