Passing Php variable to Laravel Blade Component

Question

I have made a laravel component using php artisan make:component testcomponent for which two files are created; one is blade and second one is php class file. here is the blade file:

<div>
    {{ $data }}
</div>

and here is the php file

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class testcomponent extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.testcomponent');
    }
}

And i called this component in a blade file using this way <x-testcomponent/>

But Now, how can i pass a variable coming form controller to this component?

Rembrandt

laravel.com/docs/9.x/blade#passing-data-to-components – Dorotheadorothee

Answer 1

First of all go to the php component file and do this.(Declare a variable and assign a value from variable coming from constructor)

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class testcomponent extends Component
{
    public $data;
    public function __construct($data)
    {
        //
        $this->data=$data;
    }

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

and then in the view file where you call blade component; you can call like this

<x-testcomponent :data=$data/>

where $data is the variable coming from controller

Thats solved!!

Urea

Is it possible to assign multiple variables containing data into the component, such as <x-testcomponent :data1=$data1 :data2=$data2/> ? I can not find answer anywhere, and the laravel throws an error when using multiple attributes with a ':' character prefix. – Laniary

Answer 2

In your controller, you would pass the data to the view, by adding to the view function, like so:

$data =
[
    'something' => 'some contents'
];

return view('home', $data);

Change 'home' to whatever is the top-level view.

Assuming 'home' is your top level view, home would begin with:

<x-testcomponent :data="$data" />

Note the '/>' at the end. If you closing the x-testcomponent at the end of the file, you would just want:

<x-testcomponent :data="$data" >

Finally, in your TestComponent View class, pass and save the data, like so:

class TestComponent extends Component
{
    public $data;

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

Afterwards, in your testcomponent.blade.php, the following code should now work:

<div>
    {{ $data }}
</div>

Catalano

Answer 3

then can we send multipl variable like:

<x-testcomponent :user=$user :data=$data/>

Dulcet

Please proofread your answers when submitting. If you had, you would have noticed something missing. – Cimex