Laravel Volt组件参数传递报错排查及正确实现

错误原因分析 #

出现该错误通常是以下三个原因之一：

• 组件类未声明响应式属性：Volt类式组件需要显式定义要在视图中访问的变量（要么声明public属性，要么通过state()方法定义响应式状态），否则mount方法中赋值的变量无法在Blade视图中被识别。
• 组件调用传参错误：调用组件时未使用数组形式传递参数，或参数名与mount方法的参数名不匹配，导致组件无法接收参数，进而视图中变量未定义。
• 视图变量引用错误：视图中误写变量名（如$ID而非$id），也会触发该错误。

正确实现步骤 #

1. 组件类（app/Livewire/Common/Controls/ReadonlyInput.php） #

<?php

namespace App\Livewire\Common\Controls;

use Livewire\Volt\Component as VoltComponent;

class ReadonlyInput extends VoltComponent
{
    // 声明public属性作为响应式变量，直接在视图中访问
    public string $id;
    public mixed $form;

    // 接收父组件传递的参数并赋值
    public function mount(string $id, mixed $form)
    {
        $this->id = $id;
        $this->form = $form;
    }
}

2. Blade视图文件（resources/views/livewire/common/controls/readonly-input.blade.php） #

<div class="mb-4">
    <label for="{{ $id }}" class="block text-sm font-medium text-gray-700">
        {{ $form['label'] ?? '未命名字段' }}
    </label>
    <input 
        type="text" 
        id="{{ $id }}" 
        value="{{ $form['value'] ?? '' }}" 
        readonly 
        class="mt-1 block w-full rounded-md border-gray-300 bg-gray-50 shadow-sm sm:text-sm"
    >
</div>

3. 父视图中调用组件 #

确保传递的参数名与mount方法的参数名完全一致（大小写敏感）：

{{-- 示例：假设父视图中有$userEmailId和$emailForm两个变量 --}}
@livewire('common.controls.readonly-input', ['id' => $userEmailId, 'form' => $emailForm])

{{-- 或使用Livewire 3支持的标签式语法 --}}
<livewire:common.controls.readonly-input :id="$userEmailId" :form="$emailForm" />

内容的提问来源于stack exchange，提问作者Petro Gromovo