Passing Data To Components - Laravel Blade Components

We can pass data to Laravel blade components using HTML attributes. Hard-coded, primitive values can be passed to the component using simple HTML attribute strings in Laravel 9 applications. PHP expressions and variables may be passed to the Laravel 9 component via attributes that use the : character as a prefix:

I will share the explanation of pass data to component laravel 9. So let's see the example of pass variable in component laravel.

Just update this component blade file with your HTML like:

resources/views/welcome.blade.php

@extends('layouts.app')

@inject('utils', 'App\Utils\Utils')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel 9.x Blade Components Tutorial | Laravelia</div>
                <div class="card-body">
                    @php
                        $message = "Laravelia";
                    @endphp
                    <x-alert :message="$message"/>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

 

Now we have to receive this message variable from the component class like:

App\View\Components\Alert.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function render()
    {
        return view('components.alert');
    }
}

 

Now, this $message variable is now available in your alert component to print.

resources/views/components/alert.blade.php

<div>{{ $message }}</div>

 

Read also: How To Use Slot In Laravel 9 Blade Component?

 

Conclusion

I have tried to discuss the clear concept of pass data to component laravel. Now we know pass variable in component laravel. Hope this laravel pass array to component tutorial will help you.