Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello, i have a lot question to ask about blade templates passing parameter short here.
namespace App\View\Components\utility;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class InputTest extends Component
{
/**
* Create a new component instance.
*/
public int $userIds;
public function __construct(
public ?int $pass = 0,
public ?int $userId = 0
)
{
$this->userIds = $this->userId;
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.utility.input-test');
}
}
@php
$userId = null
@endphp
<x-utility.input-test :$userId :pass="null" some_nums="42"></x-utility.input-test>
<div class="w-full flex flex-col">
{{dd($attributes, $pass, $userIds)}}
<input {{$attributes->merge(['class' => 'min-w-fit h-[50px] px-4 mb-5
text-lg placeholder-gray-600 border rounded-lg text-comfy-dark'.($class ?? ''),
'type' => ($type ?? "text")])}}
</div>
Thank in advanced
Are you able to add more detail to your first question? I don't fully understand what you mean by "pass variable with different name without putting view(component, data)".
As for your second, when passing properties to a Blade component using the short syntax, you may use camelCase if needed. Aside from that, you must use kebab-case as you would with a real HTML element.
@jj15 Thanks for answer second question. it really help for.
To add more detail to my first question: I realize I mixed up the concepts of default Blade view templates and Livewire.
In short, I want to know: Does Livewire support passing data in a way that is similar to how I do it in Blade templates, as shown in my snippet code? Or does it behave differently when it comes to passing data to components?
Specifically, I’m curious about whether I can pass data to Livewire components in the same way I pass data to Blade components, or if there are unique methods or requirements in Livewire that I should be aware of.
This is my example, Sorry for bad code, Blade Template Usage
canvas.blade.php
<x-primitive-layout class="flex-col bg-none sm-scrollbar"
text="main-layout as per usual"
form="false" left_slot="true" right_slot="true" :number=42>
<div class="max-[240px]:hidden bg-gray-100/80 w-full">
<x-slot name="mains">
"hello"
</x-slot>
<!-- Simplicity is the essence of happiness. - Cedric Bledsoe -->
</div>
</x-primitive-layout>
primitive-layouts.blade.php
@include('components.header')
<body {{$attributes->merge(['class' => 'w-full min-h-fit flex font-sans antialiased'.($class ?? '')])}}>
<div class = "w-full min-h-fit flex">
@if($form && $mains)
<div class = "w-full min-h-screen flex flex-col justify-center items-center bg-none max-lg:w-full max-md:w-full">
<div class = "w-full h-[calc(100% - 10%)] pb-5 flex flex-col items-center bg-none py-4 max-lg:w-full max-md:w-full">
{{$mains}}
</div>
<div class = "w-full h-[calc(7%)] flex flex-col items-center bg-none pb-16 max-lg:w-full max-md:w-full">
@yield('bottom-bar-nav')
</div>
</div>
@endif
</div>
{{dd($items)}}
{{-- $mains, $left_slots, $right_slots--}}
{{-- @stack('modals')--}}
{{-- @livewireScripts--}}
</body>
<?php
declare(strict_types=1);
namespace App\View\Components;
use App\Http\Controllers\Misc\DataMapper;
use Illuminate\View\View;
use Illuminate\View\Component;
class PrimitiveLayout extends Component
{
public function __construct(
public string $text = "",
public bool $form = false,
public bool $left_slot = false,
public bool $right_slot = false,
public int $number = 0
)
{
$this->pass_text = $this->text;
$this->pass_form = $this->form;
$this->pass_left_slot = $this->left_slot;
$this->pass_right_slot = $this->right_slot;
$this->numbers = $this->number;
}
public function render(): View
{
$items = ((new DataMapper())->TranspilerDTO(new PrimitiveLayout($this->text, $this->form, $this->left_slot, $this->right_slot, $this->number)));
return view('layouts.primitive-layouts', [
'items' => $items
]);
}
}
Ignore those my custom mapper there
Thanks again for your assistance!
No worries and thank you for adding additional details to your first question.
You can indeed pass properties to Livewire components in essentially the same way that you would with a Blade component, including using the short-attribute syntax and kebab-case (which Livewire will map to the camelCase-named property in the component).
As for named slots (<x-slot:foo>) and the magic $attributes object, those are not available in Livewire.
I hope this was clear, let me know if it wasn't :)
Thank you for your helpful reply! I appreciate the distinction between Blade and Livewire.
{{dd($attributes, $pass, $userIds)}}
$userIds is not the same as $userId
Apart from that, I have no idea what you are asking
@Snapey Thanks for your patience! I realize I may not have communicated my question clearly. I appreciate your feedback, and I'll work on being more precise in my explanations moving forward.
To clarify, I was trying to understand the difference between passing variables in Blade templates and Livewire components, especially regarding how variable names can differ.
Thanks again for your help!
Please or to participate in this conversation.