如何在Laravel Blade 8.x中将数组作为props动态传递给组件

开发者阿泽

2026-9-24

Laravel Blade 8.x 数组动态传递组件props解决方案

你之前的写法不生效的原因是Blade无法直接将数组转换为HTML属性字符串，Laravel原生提供了成熟的批量传参方案，不需要自定义处理逻辑，以下是两种可行实现：

方案1：使用内置`:props`语法（推荐）

这是官方标准写法，会自动将数组键值对映射为组件的props：预定义的props会自动赋值给对应变量，未定义的额外属性会自动归入组件的$attributes属性包，完全适配你无法预知所有传入prop的业务场景。
只需修改ButtonGroup组件的循环渲染代码即可：

@props([
  'buttons' => []
])

<div class="...">
  @foreach ($buttons as $buttonProps)
    <!-- 直接用:props传入props数组 -->
    <x-button size="sm" :props="$buttonProps" />
  @endforeach
</div>

属性优先级说明

属性的覆盖优先级和书写顺序一致，后写的配置会覆盖前序的同键名配置：

若要让固定的size="sm"覆盖数组中的size配置，调整顺序为：<x-button :props="$buttonProps" size="sm" />
若要让数组中的配置优先，保持原顺序即可

方案2：手动转换为`ComponentAttributeBag`

如果需要提前对属性数组做自定义处理（过滤、合并默认值等），可以手动将数组转为Blade的属性包对象，再直接输出：

@props([
  'buttons' => []
])

<div class="...">
  @foreach ($buttons as $buttonProps)
    @php
      // 转换为属性包，支持提前调用merge、filter等方法处理属性
      $buttonAttrs = new \Illuminate\View\ComponentAttributeBag($buttonProps);
    @endphp
    <x-button size="sm" {{ $buttonAttrs }} />
  @endforeach
</div>