@@ -2453,40 +2453,6 @@ The parent-child system is *smart*. And with a few tricks
2453
2453
(:ref: `such as the key prop for lists of embedded components <rendering-quirks-with-list-of-embedded-components >`),
2454
2454
you can make it behave exactly like you need.
2455
2455
2456
- .. _passing-blocks :
2457
-
2458
- Passing Blocks to Components
2459
- ----------------------------
2460
-
2461
- Passing blocks to Live components works completely the same way you would `pass blocks for Twig Components `_. Except...
2462
-
2463
- When re-rendering a Live component, only the template for thàt component is rendered. The blocks defined in the
2464
- "parent" template are grabbed via the smart Twig templating system, but the context from the parent template is *NOT *
2465
- available during re-rendering. So, keep in mind to not refer to any outer context variables within blocks of a live component.
2466
-
2467
- This won't work:
2468
-
2469
- .. code-block :: twig
2470
-
2471
- {# templates/some_page.html.twig #}
2472
- {% set message = 'Outer context only works on first render' %}
2473
-
2474
- {% component Alert %}
2475
- {% block content %}{{ message }}{% endblock %}
2476
- {% endcomponent %}
2477
-
2478
- Local variables do remain available:
2479
-
2480
- .. code-block :: twig
2481
-
2482
- {# templates/some_page.html.twig #}
2483
- {% component Alert %}
2484
- {% block content %}
2485
- {% set message = 'this works during re-rendering!' %}
2486
- {{ message }}
2487
- {% endblock %}
2488
- {% endcomponent %}
2489
-
2490
2456
.. _child-component-independent-rerender :
2491
2457
2492
2458
Each component re-renders independent of one another
@@ -2945,6 +2911,36 @@ To fix this, you have two options:
2945
2911
}
2946
2912
}
2947
2913
2914
+ .. _passing-blocks :
2915
+
2916
+ Passing Content (Blocks) to Components
2917
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2918
+
2919
+ Passing content via blocks to Live components works completely the same way you would `pass content to Twig Components `_.
2920
+ Except with one important difference: when a component is re-rendered, any variables defined only in the
2921
+ "outside" template will note be available. For example, this won't work:
2922
+
2923
+ .. code-block :: twig
2924
+
2925
+ {# templates/some_page.html.twig #}
2926
+ {% set message = 'Variables from the outer part of the template are only available during the initial render' %}
2927
+
2928
+ {% component Alert %}
2929
+ {% block content %}{{ message }}{% endblock %}
2930
+ {% endcomponent %}
2931
+
2932
+ Local variables do remain available:
2933
+
2934
+ .. code-block :: twig
2935
+
2936
+ {# templates/some_page.html.twig #}
2937
+ {% component Alert %}
2938
+ {% block content %}
2939
+ {% set message = 'this works during re-rendering!' %}
2940
+ {{ message }}
2941
+ {% endblock %}
2942
+ {% endcomponent %}
2943
+
2948
2944
Advanced Functionality
2949
2945
----------------------
2950
2946
@@ -3161,4 +3157,4 @@ bound to Symfony's BC policy for the moment.
3161
3157
.. _`the traditional collection type` : https://symfony.com/doc/current/form/form_themes.html#fragment-naming-for-collections
3162
3158
.. _`How to Work with Form Themes` : https://symfony.com/doc/current/form/form_themes.html
3163
3159
.. _`Symfony's built-in form theming techniques` : https://symfony.com/doc/current/form/form_themes.html
3164
- .. _`pass blocks for Twig Components` : https://symfony.com/bundles/ux-twig-component/current/index.html#passing-blocks
3160
+ .. _`pass content to Twig Components` : https://symfony.com/bundles/ux-twig-component/current/index.html#passing-blocks
0 commit comments