$slot 未定义变量在 Laravel 11 中使用 Livewire 组件

Question

这是我尝试使用可重用组件创建登录表单的代码。我想用图标渲染按钮组件，但是当我通过插槽时出现错误。

应用程序/livewire/Button.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] }}">
        {{ $value }}
        <div class="inline-block">{!! $slot !!}</div>
    </button>
  @elseif ($tag == 'link')
    <a class="{{ $classValueVariants[$buttonType] }} {{ $customClass }}">
        {{ $value }}
        <div class="inline-block">{!! $slot !!}</div>
    </a>
  @endif
</div>

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" href="/auth/github">
        <x-fab-github 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"
        value="Connect with Slack"
    >
        <x-fab-slack class="w-7 h-7 text-white bg-red-500" />
    </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 --}}

Answer 1

$slot

是 Blade 组件功能。
如果你仔细阅读Livewire文档，你会发现

$slot

只用在Livewire的布局文件中，Livewire是一个Blade组件。

通过属性传递所有必需的数据。