如何在Laravel Blade模板中通过x-slot向布局传递数组

1. 修改布局组件文件（layout.blade.php） #

在文件开头添加@props(['arr'])声明接收的参数，之后就能在布局内直接使用$arr变量：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--wrapper-->
<div class="wrapper">
    {{-- 直接处理$arr数组，示例：遍历输出 --}}
    @foreach($arr as $item)
        <p>{{ $item }}</p>
    @endforeach

    {{ $slot }}
</div>
<!--end wrapper-->
</body>
</html>

2. 在视图文件中传递数组 #

使用:arr语法绑定PHP变量（冒号表示传递变量而非字符串）：

<x-layout :arr="$arr">
    {{-- 默认插槽内容 --}}
    <p>视图内的自定义内容</p>
</x-layout>

如果需要先在视图里处理数组的渲染逻辑，再传递到布局展示，可使用命名插槽：

1. 修改布局组件文件 #

在布局中定义命名插槽arr：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--wrapper-->
<div class="wrapper">
    {{-- 渲染命名插槽的内容 --}}
    {{ $arr }}

    {{ $slot }}
</div>
<!--end wrapper-->
</body>
</html>

2. 在视图文件中填充命名插槽 #

在视图里通过<x-slot:arr>填充数组的渲染结果：

<x-layout>
    <x-slot:arr>
        @foreach($arr as $item)
            <span>{{ $item }}</span>
        @endforeach
    </x-slot:arr>

    {{-- 默认插槽内容 --}}
    <p>视图内的自定义内容</p>
</x-layout>

注意：仅传递原始数组变量时优先用方法一，更直接高效；方法二适合需要提前处理数组渲染逻辑的场景。

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