Passing Data To Laravel Components

We can pass data to Blade components using HTML attributes. Hard-coded, primitive values may be passed to the component using simple HTML attribute strings.

PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix:

<x-alert type=”error” :message=”$message”/>

You should define the component’s required data in its class constructor. All public properties on a component will automatically be made available to the component’s view. It is not necessary to pass the data to the view from the component’s render method:

<?php
 
namespace App\View\Components;
 
use Illuminate\View\Component;
 
class Alert extends Component
{
    /**
     * The alert type.
     *
     * @var string
     */
    public $type;
 
    /**
     * The alert message.
     *
     * @var string
     */
    public $message;
 
    /**
     * Create the component instance.
     *
     * @param  string  $type
     * @param  string  $message
     * @return void
     */
    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }
 
    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

When your component is rendered, you may display the contents of your component’s public variables by echoing the variables by name:

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>