Laravel 9x Blade中如何获取子组件的属性？

问题描述 #

我有两个Blade组件tab.blade.php和tab-content.blade.php，其中tab作为父组件，可嵌套一个或多个tab-content子组件。需要在tab.blade.php中调用{{ $slot }}之前，获取所有tab-content子组件的id属性列表，示例用法如下：

<x-tab>
    <x-tab-content id="a">testA</x-tab-content>
    <x-tab-content id="b">testB</x-tab-content>
    <x-tab-content id="c">testC</x-tab-content>
</x-tab>

请问在Laravel 9x的Blade模板中是否可以实现此需求？

实现方案 #

可以实现，核心是通过组件类解析插槽内容，提取目标子组件的属性。以下是具体步骤：

1. 定义TabContent组件类

在app/View/Components目录下创建组件类，用于存储子组件的id属性：

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class TabContent extends Component
{
    public string $id;

    public function __construct(string $id)
    {
        $this->id = $id;
    }

    public function render()
    {
        return view('components.tab-content');
    }
}

2. 定义Tab组件类并收集子组件ID

在父组件类中遍历插槽的子元素，筛选出TabContent实例并收集id：

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

class Tab extends Component
{
    public array $tabIds = [];

    public function render(): View
    {
        // 遍历插槽子元素，提取TabContent组件的id
        foreach ($this->slot->children as $child) {
            if ($child instanceof View && $child->component instanceof TabContent) {
                $this->tabIds[] = $child->component->id;
            }
        }

        return view('components.tab', [
            'tabIds' => $this->tabIds,
        ]);
    }
}

3. 编写tab.blade.php父组件模板

先使用收集到的$tabIds做预处理（比如生成标签导航），再输出插槽内容：

<div class="tab-wrapper">
    <!-- 用收集到的ID生成标签导航 -->
    <div class="tab-nav">
        @foreach($tabIds as $id)
            <button data-tab="{{ $id }}">{{ ucfirst($id) }}</button>
        @endforeach
    </div>

    <!-- 输出所有子组件内容 -->
    {{ $slot }}
</div>

4. tab-content.blade.php子组件模板示例

<div id="{{ $id }}" class="tab-panel">
    {{ $slot }}
</div>

注意事项 #

• 必须通过组件类定义子组件，不能使用纯匿名组件，否则父组件无法识别并获取其属性。
• 插槽中若存在非tab-content的内容，上述逻辑会自动忽略，仅收集目标子组件的ID。

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