Skip to content

Commit e0c2279

Browse files
committed
Reword
1 parent a054563 commit e0c2279

File tree

1 file changed

+32
-20
lines changed

1 file changed

+32
-20
lines changed

src/TwigComponent/doc/index.rst

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -455,17 +455,16 @@ The mount() Method
455455
~~~~~~~~~~~~~~~~~~
456456

457457
The ``mount()`` method gives you more control over how your "props" are handled.
458-
It is called only once: immediately after your component is instantiated.
459-
The ``mount()`` method **cannot access the values of the public properties**
460-
passed when rendering the component.
458+
It is called once, immediately after the component is instantiated, **but before**
459+
the component system assigns the props you passed when rendering.
461460

462461
For example, if you call your component like this:
463462

464463
.. code-block:: html+twig
465464

466465
<twig:Alert type="error" message="..."/>
467466

468-
The following code won't work as expected:
467+
The following code won't work as expected::
469468

470469
// src/Twig/Components/Alert.php
471470
// ...
@@ -478,8 +477,8 @@ The following code won't work as expected:
478477

479478
public function mount(): void
480479
{
481-
{# ❌ this won't work: at this point, the $type property still has its
482-
default value. Passed properties are not yet available. #}
480+
{# ❌ this won't work: at this point $type still has its default value.
481+
Passed values are not yet available in props. #}
483482
if ('error' === $this->type) {
484483
// ...
485484
}
@@ -488,7 +487,32 @@ The following code won't work as expected:
488487
// ...
489488
}
490489

491-
Instead, define the values you need in the ``mount()`` method as arguments::
490+
Inside ``mount()``, each prop has only its *default* value (or ``null`` if it is
491+
untyped and has no default). If you need a prop's value, declare a parameter in
492+
``mount()`` whose name matches the prop instead of reading the public property::
493+
494+
public function mount(string $type): void
495+
{
496+
{# ✅ this works as expected: the $type argument in PHP has the value
497+
passed to the 'type' prop in the Twig template #}
498+
if ('error' === $type) {
499+
// ...
500+
}
501+
}
502+
503+
If a prop name (e.g. ``type``) matches an argument name in ``mount()``,
504+
its value will be passed only to the method. The component system **will not**
505+
set it on a public property or use it in the component's ``attributes``.
506+
507+
``mount()`` can also receive props **even when no matching public property
508+
exists**. For example, pass an ``isError`` prop instead of ``type``:
509+
510+
.. code-block:: html+twig
511+
512+
<twig:Alert isError="{{ true }}" message="..."/>
513+
514+
Define a ``$isError`` argument to capture the prop and initialize other
515+
properties using that value::
492516

493517
#[AsTwigComponent]
494518
class Alert
@@ -498,26 +522,14 @@ Instead, define the values you need in the ``mount()`` method as arguments::
498522

499523
public function mount(bool $isError = false): void
500524
{
501-
{# ✅ this works as expected #}
502525
if ($isError) {
503-
// ...
526+
$this->type = 'danger';
504527
}
505528
}
506529

507530
// ...
508531
}
509532

510-
Now, pass the ``mount()`` argument like any other prop:
511-
512-
.. code-block:: html+twig
513-
514-
<twig:Alert isError="{{ true }}" message="..."/>
515-
516-
If a prop name (e.g. ``isError``) matches an argument name in ``mount()``,
517-
its value will be passed to the method. In that case, the component system
518-
**will not** set it on a public property or use it in the component's
519-
``attributes``.
520-
521533
PreMount Hook
522534
~~~~~~~~~~~~~
523535

0 commit comments

Comments
 (0)