Passing data in Livewire

Let's say we have a show blade file

// show.blade.php
<x-layout>
 <nav>
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>→</li>
    <li><a href="{{ route('jobs.index') }}">Jobs</a></li>
  </ul>
 </nav>
     <x-job-card :job="$job" />
  </x-layout>

$job variable is passed through the controller. Now if we want to pass the $job variable to the job-card component, we can pass it using bind properties like here :

<x-job-card :job="$job" /> 
// when can write too like this
<x-job-card :$job />

We passed the $job variable to the job-card component .

:variableName: we can choose any variable name we want the we must pass it in the constructor of the component like this :

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class JobCard extends Component
{

 // public $job : here we define the name
    public function __construct(public $job)
    {

    }


    public function render(): View|Closure|string
    {
        return view('components.job-card');
    }
}

Now the $job variable will be accessible in the job-card component and we can use it like this

{{ $job->title }}