@@ -447,15 +447,24 @@ need to populate, you can render it with:
447447Mounting Data
448448-------------
449449
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 .
453453
454454The mount() Method
455455~~~~~~~~~~~~~~~~~~
456456
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::
459468
460469 // src/Twig/Components/Alert.php
461470 // ...
@@ -466,30 +475,60 @@ called ``mount()``::
466475 public string $message;
467476 public string $type = 'success';
468477
469- public function mount(bool $isSuccess = true ): void
478+ public function mount(): void
470479 {
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+ }
472485 }
473486
474487 // ...
475488 }
476489
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 ``:
481509
482510.. code-block :: html+twig
483511
484- <twig:Alert
485- isSuccess="{{ false }}"
486- message="Danger Will Robinson!"
487- />
512+ <twig:Alert isError="{{ true }}" message="..."/>
488513
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+ }
493532
494533PreMount Hook
495534~~~~~~~~~~~~~
0 commit comments