Laravel 11中使用Livewire组件传递Slot时出现未定义变量错误

问题核心原因 #

1. Livewire组件未声明公共属性，导致参数传递失效
2. Slot渲染方式错误，误用{!! $slot !!}而非Livewire标准的{{ $slot }}
3. <a>标签缺失href属性绑定，链接功能失效
4. 属性逻辑不严谨，比如type="submit"不适用于非button标签

修正后的完整代码 #

1. Livewire按钮组件类（App/Livewire/Button.php）

<?php

namespace App\Livewire;

use Livewire\Component;

class Button extends Component
{
    // 声明所有需要接收的公共属性
    public string $buttonType = 'default';
    public string $tag = 'button';
    public string $type = 'button';
    public string $customClass = '';
    public string $value = '';
    public ?string $href = null;

    public function render()
    {
        return view('livewire.button');
    }
}

2. 按钮组件视图（resources/views/livewire/button.blade.php）

@php
$classValueVariants = [
    'default' => 'w-full max-w-sm py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none peer',
    'icon' => 'py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border disabled:opacity-50 disabled:pointer-events-none peer',
];
@endphp

<div>
    @if ($tag === 'button')
        <button 
            type="{{ $type }}" 
            class="{{ $customClass }} {{ $classValueVariants[$buttonType] }}"
            {{ $attributes->except(['buttonType', 'tag', 'type', 'customClass', 'value', 'href']) }}
        >
            @if($value)
                {{ $value }}
            @endif
            {{ $slot }}
        </button>
    @elseif ($tag === 'link')
        <a 
            href="{{ $href }}" 
            class="{{ $classValueVariants[$buttonType] }} {{ $customClass }}"
            {{ $attributes->except(['buttonType', 'tag', 'type', 'customClass', 'value', 'href']) }}
        >
            @if($value)
                {{ $value }}
            @endif
            {{ $slot }}
        </a>
    @endif
</div>

3. 登录表单调用修正（livewire/login-form.php）

{{-- !Separator --}}

<div class="w-full max-w-sm flex gap-2 justify-evenly items-center">
    <livewire:button 
        button-type="icon" 
        type="submit" 
        tag="button"
        custom-class="text-center border-2 bg-blue-600"
    >
        <x-fab-github class="w-7 h-7 text-white" />
    </livewire:button>

    <livewire:button
        button-type="icon"
        type="button"
        custom-class="text-center border-2 bg-blue-600"
        value="Connect with Slack"
        tag="button"
    >
        <x-fab-slack class="w-7 h-7 text-white" />
    </livewire:button>

    <livewire:button 
        button-type="icon" 
        type="submit" 
        custom-class="text-center border-2 bg-blue-600"
    >
        <x-fab-google class="w-7 h-7 text-white" />
    </livewire:button>
</div>
{{-- !title --}}

关键修正点说明 #

• 必须在Livewire组件类中声明所有公共属性，否则无法接收外部传递的参数
• 使用{{ $slot }}替代{!! $slot !!}，Livewire会自动安全渲染插槽内容
• 为<a>标签补充href属性绑定，确保链接功能正常
• 通过$attributes->except()传递额外HTML属性，提升组件灵活性
• 增加@if($value)判断，避免无文本时显示空内容
• 注意type="submit"仅适用于<button>标签，链接类型组件需移除该属性

内容的提问来源于stack exchange，提问作者Oscar alvaro