O componente: um HTML dentro do outro HTML

[Frank K Hosaka]

No meu projeto Laravel eu criei o arquivo menu.blade.php. Para chamar  arquivo menu.blade.hp dentro do outro arquivo tipo pagar.blade.php, eu usei o comando @include('menu').

No projeto Chirps que aparece no manual oficial do Laravel 10, no entanto, ele usa outra tecnologia: <x-app-layout> </x-app-layout>, ele está amarrado no arquivo views\layout\app.blade.php, e dentro desse arquivo tem um comando reservado para incluir um novo HTML, ele é chamado de {{$slot}}.

Eu não vejo nenhuma necessidade de usar essa tecnologia, mas ela é interessante. A solução mais simples é copiar todo o conteúdo do arquivo views\menu.blade.php no arquivo views\layout\app.blade.php e no final acrescentar o comando {{$slot}}. O chato é que eu vou precisar colocar marcador <x-app-layout> </x-app-layout> em todos os demais arquivos que se reportavam ao menu.blade.php.

A Lei do Menor Esforço me orienta a não mexer no meu projeto, mas nada impede de eu fazer um teste.

Encontrei um outro tutorial no Google informando que eu preciso usar o comando php artisan make:components teste. Ele cria o arquivo views\components\teste.blade.php. Dentro dele, criei o seguinte código:

olá mundo 1
<div>
{{$slot}}
</div>
olá mundo 2

Dentro da pasta views, eu criei o arquivo teste2.blade.php

<x-teste>
    teste2
</x-teste>

Para eu poder chamar o arquivo teste2 na barra do navegador, eu acrescentei esse código no arquivo routes/web.php:

Route::view('teste2','teste2');

Note que 'teste2' aparace duas vezes, o primeiro é o comando que você vai usar no navegador: localhost:8000/teste2 e o segundo é o nome do arquivo que o Laravel vai ter que abrir e mostrar no navegador, assim: