@@ -447,15 +447,24 @@ need to populate, you can render it with:
447
447
Mounting Data
448
448
-------------
449
449
450
- Most of the time, you will create public properties and then pass values
451
- to those as "props" when rendering. But there are several hooks in case
452
- you need to do something more complex.
450
+ Most of the time, you will create public properties and pass values to them
451
+ as "props" when rendering the component. However, there are several hooks
452
+ available when you need to perform more complex logic .
453
453
454
454
The mount() Method
455
455
~~~~~~~~~~~~~~~~~~
456
456
457
- For more control over how your "props" are handled, you can create a method
458
- called ``mount() ``::
457
+ The ``mount() `` method gives you more control over how your "props" are handled.
458
+ It is called once, immediately after the component is instantiated, **but before **
459
+ the component system assigns the props you passed when rendering.
460
+
461
+ For example, if you call your component like this:
462
+
463
+ .. code-block :: html+twig
464
+
465
+ <twig:Alert type="error" message="..."/>
466
+
467
+ The following code won't work as expected::
459
468
460
469
// src/Twig/Components/Alert.php
461
470
// ...
@@ -466,30 +475,60 @@ called ``mount()``::
466
475
public string $message;
467
476
public string $type = 'success';
468
477
469
- public function mount(bool $isSuccess = true ): void
478
+ public function mount(): void
470
479
{
471
- $this->type = $isSuccess ? 'success' : 'danger';
480
+ {# ❌ this won't work: at this point $type still has its default value.
481
+ Passed values are not yet available in props. #}
482
+ if ('error' === $this->type) {
483
+ // ...
484
+ }
472
485
}
473
486
474
487
// ...
475
488
}
476
489
477
- The ``mount() `` method is called just one time: immediately after your
478
- component is instantiated. Because the method has an ``$isSuccess ``
479
- argument, if we pass an ``isSuccess `` prop when rendering, it will be
480
- passed to ``mount() ``.
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 ``:
481
509
482
510
.. code-block :: html+twig
483
511
484
- <twig:Alert
485
- isSuccess="{{ false }}"
486
- message="Danger Will Robinson!"
487
- />
512
+ <twig:Alert isError="{{ true }}" message="..."/>
488
513
489
- If a prop name (e.g. ``isSuccess ``) matches an argument name in ``mount() ``,
490
- the prop will be passed as that argument and the component system will
491
- **not ** try to set it directly on a property or use it for the component
492
- ``attributes ``.
514
+ Define a ``$isError `` argument to capture the prop and initialize other
515
+ properties using that value::
516
+
517
+ #[AsTwigComponent]
518
+ class Alert
519
+ {
520
+ public string $message;
521
+ public string $type = 'success';
522
+
523
+ public function mount(bool $isError = false): void
524
+ {
525
+ if ($isError) {
526
+ $this->type = 'danger';
527
+ }
528
+ }
529
+
530
+ // ...
531
+ }
493
532
494
533
PreMount Hook
495
534
~~~~~~~~~~~~~
0 commit comments