CODEWITHSUNDEEP
laravellaravel-8
Thomas
Thomas

Reputation: 133

How to pass data from child to parent using component templating?

I started laravel with Laravel8 and from what I was seeing was that they were moving towards using component templating such as:

<-- layout.blade.php -->

<html>
<body>
{{ $slot }}
</body>
</html>

<-- view.blade.php -->

<x-layout>
    <main>Content</main>
</x-layout>

As opposed to @yield and @extends type templating:

<--layout.blade.php -->

<html>
<body>
    @yields('content')
</body
</html>

<-- view.blade.php -->

@extends('layout')
@section('content')
   Content
@endsection

Now I'm working towards creating dynamic titles per page.

<-- views/components/layout.blade.php -->

<html>
<head>
  <title>{{ isset($title) ? $title . ' | ' . config('app.name') : config('app.name') }}</title>
</head>
<body>
    {{ $slot }}
</body>
</html>

<-- views/articles/index.blade.php -->

<x-layout>
    <main>Content</main>
</x-layout>

Then an Article Controller

public function index()
    {
        $title = 'Articles';

        return view('articles.index', [
            'articles' => Article::latest('published_at')->filter(request(['search', 'category']))->get(),
            'title' => $title,
        ]);
    }

Using the newer "component templating" style, how do I pass the $title from the articles/index.blade.php view to the layout component? Is this a limitation of this approach?

I've seen a number or writeups on how to achieve this using the @yields @extends approach, but trying to not have to rework my entire site if there is the capabilities with the approach I've taken.

Upvotes: 1

Views: 3656

Answers (1)

Thomas
Thomas

Reputation: 133

I figured out how to address this. You can pass data to a parent component in the same way you pass data to a child component.

<-- views/articles/index.blade.php -->

<x-layout :title="$title">
    <main>Content</main>
</x-layout>

Allowed the parent to be updated from the child.

Upvotes: 3

Related Questions