@@ -455,17 +455,16 @@ The mount() Method
455
455
~~~~~~~~~~~~~~~~~~
456
456
457
457
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.
461
460
462
461
For example, if you call your component like this:
463
462
464
463
.. code-block :: html+twig
465
464
466
465
<twig:Alert type="error" message="..."/>
467
466
468
- The following code won't work as expected:
467
+ The following code won't work as expected::
469
468
470
469
// src/Twig/Components/Alert.php
471
470
// ...
@@ -478,8 +477,8 @@ The following code won't work as expected:
478
477
479
478
public function mount(): void
480
479
{
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 . #}
483
482
if ('error' === $this->type) {
484
483
// ...
485
484
}
@@ -488,7 +487,32 @@ The following code won't work as expected:
488
487
// ...
489
488
}
490
489
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::
492
516
493
517
#[AsTwigComponent]
494
518
class Alert
@@ -498,26 +522,14 @@ Instead, define the values you need in the ``mount()`` method as arguments::
498
522
499
523
public function mount(bool $isError = false): void
500
524
{
501
- {# ✅ this works as expected #}
502
525
if ($isError) {
503
- // ...
526
+ $this->type = 'danger';
504
527
}
505
528
}
506
529
507
530
// ...
508
531
}
509
532
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
-
521
533
PreMount Hook
522
534
~~~~~~~~~~~~~
523
535
0 commit comments