Example — Nested components

A dashboard parent hosts a reactive panel child and listens for a child event.

Child

Kotlin

class Panel : Component() {
    @field:Reactive
    var title = ""

    @field:Modelable
    var note = ""

    fun save() {
        dispatch("panel-saved", mapOf("title" to title))
    }

    override fun template() = """
        <section>
            <h2>{{ title }}</h2>
            <input wire:model.live="note" />
            <button type="button" wire:click="save">Save panel</button>
        </section>
    """.trimIndent()
}

Java

public class Panel extends Component {
    @Reactive public String title = "";
    @Modelable public String note = "";

    public void save() {
        dispatch("panel-saved", Map.of("title", title));
    }

    @Override
    public String template() {
        return """
            <section>
                <h2>{{ title }}</h2>
                <input wire:model.live="note" />
                <button type="button" wire:click="save">Save panel</button>
            </section>
            """;
    }
}

Parent

class Dashboard : Component() {
    var heading = "Ops"
    var draft = ""
    var lastSaved = ""

    fun onPanelSaved(title: String = "") {
        lastSaved = title
    }

    override fun template() = """
        <div>
            <p>Last saved: {{ lastSaved }}</p>
            <brew:panel
                wire:key="main"
                :title="heading"
                wire:model="draft"
                @panel-saved="onPanelSaved"
            />
        </div>
    """.trimIndent()
}

Lazy child

@Lazy
class HeavyChart : Component() {
    override fun placeholder() = """<div aria-busy="true">Loading chart…</div>"""
}

<brew:heavy-chart lazy />

More detail: Nesting, islands & lazy.