Composition

Given this component:

<?php

namespace App\Component;

final readonly class Greeter
{
    public function __construct(
        public string $name,
    ) {}
} ?>

<template>
    <span>Hello, {{ $this->name }}!</span>
</template>

In order to use it in another component template, you have to import it using the :uses attribute on the <template> tag first.

All the required Greeter component constructor arguments must be set using computed attributes. The order does not matter given that Sapin will invoke the constructor with the named argument syntax.

<template :uses="App\Component\Greeter">
    <h1>My app</h1>
    <Greeter :name="John" />
</template>

the :uses attribute may contains multiple imports. They must be coma separated. Trailing comas are allowed.

These following examples are valid:

<template :uses="App\Component\ComponentA, App\Component\ComponentB">
   ...
</template>

<template :uses="
    App\Component\ComponentA, 
    App\Component\ComponentB",
>
   ...
</template>

An import can be aliased following the same syntax as php:

<template :uses="
    App\Foo\Buzz as BuzzA, 
    App\Bar\Buzz as BuzzB"
>
    <BuzzA />
    <BuzzB />
</template>

Info

You can use conditional and/or looping attributes on component invocation

Repeat the component rendering for each element of an array

<template :uses="App\Component\Fruit">
    <Fruit
        :foreach="$this->fruits as $fruit"
        :fruit="$fruit"
    />
</template>

Conditionaly render a component

<template :uses="App\Component\Greeter">
    <Greeter
        :if="$this->shouldGreet"
        :name="John"
    />
</template>