Livewire v3中如何从布局向组件传递数据至$slot？

下面介绍几种实用的实现方式，适配你提供的布局代码：

方法一：直接给$slot传递参数（Blade原生方式） #

修改你的布局文件，在调用$slot时传入需要传递的数据：

<!DOCTYPE html>
<html>
<head>
    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Styles -->
    @livewireStyles
</head>
<body class="font-sans antialiased">
    <?php
    // 定义要传递给slot的自定义数据
    $layoutData = [
        'siteName' => '我的站点',
        'currentNav' => 'home'
    ];
    ?>
    <div>
        {{ $slot($layoutData) }}
    </div>

@livewireScripts
</body>
</html>

在使用该布局的Livewire组件视图中，接收并使用数据：

<x-layout>
    @php
        // 取出布局传递的数据
        $layoutData = $slot->parameters()[0];
    @endphp

    <h2>当前站点：{{ $layoutData['siteName'] }}</h2>
    <p>当前导航：{{ $layoutData['currentNav'] }}</p>

    <!-- 你的Livewire组件内容 -->
</x-layout>

方法二：将布局转为Blade组件传递属性 #

把布局改成Blade组件，通过组件类定义要传递的属性：

1. 创建布局组件类 app/View/Components/Layout.php：

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Layout extends Component
{
    // 定义公开属性，可直接在视图中访问
    public $siteName;
    public $currentUser;

    public function __construct()
    {
        // 初始化要传递的数据
        $this->siteName = '我的站点';
        $this->currentUser = auth()->user();
    }

    public function render()
    {
        return view('components.layout');
    }
}

2. 调整布局视图文件（resources/views/components/layout.blade.php），保持原有结构不变：

<!DOCTYPE html>
<html>
<head>
    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Styles -->
    @livewireStyles
</head>
<body class="font-sans antialiased">
    <div>
        {{ $slot }}
    </div>

@livewireScripts
</body>
</html>

3. 在Livewire组件视图中使用时，直接通过$component访问属性：

<x-layout>
    <h2>欢迎来到{{ $component->siteName }}</h2>
    @if($component->currentUser)
        <p>当前登录用户：{{ $component->currentUser->name }}</p>
    @endif

    <!-- 你的Livewire组件内容 -->
</x-layout>

方法三：全局共享数据（适合通用数据） #

如果是所有页面都需要的全局数据，可在服务提供者中共享，无需单独传递：

修改app/Providers/AppServiceProvider.php的boot方法：

<?php

namespace App\Providers;

use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        // 共享全局数据到所有视图
        View::share('siteName', '我的站点');
        View::share('globalNotice', '系统维护通知：今晚22点-24点暂停服务');
    }
}

之后不管是布局还是$slot中的内容，都可以直接使用这些变量：

<x-layout>
    <p>{{ $globalNotice }}</p>
    <h2>{{ $siteName }}</h2>

    <!-- 你的Livewire组件内容 -->
</x-layout>

内容的提问来源于stack exchange，提问作者Mireli Eyyubzade