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?

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

medilies
– medilies

2022-03-11 11:13:40 +00:00
Commented Mar 11, 2022 at 11:13 — medilies
– medilies, Commented Mar 11, 2022 at 11:13

Khizer Rashid · Accepted Answer · 2022-03-11 08:10:17Z

9

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!!

answered Mar 11, 2022 at 8:10

Khizer Rashid

1561 gold badge1 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jan Glaser Over a year ago

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.

James John McGuire 'Jahmic' · Accepted Answer · 2023-02-10 08:57:59Z

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>

General Grievance · Accepted Answer · 2022-06-30 12:40:59Z

-3

then can we send multipl variable like:

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

edited Jun 30, 2022 at 12:40

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Jun 29, 2022 at 20:42

Mukesh Choudhary

51 bronze badge

1 Comment

General Grievance Over a year ago

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

Collectives™ on Stack Overflow

Passing Php variable to Laravel Blade Component

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related