Laravel Blade 中高效复用表格元素：组件化实践

理解原问题：@section与@include的局限性

在 laravel blade 中，@section 和 @show 指令主要用于定义和显示布局文件中的内容块。当在被 @include 的模板中使用了 @section('insert') ... @show 结构时，每次 @include 该模板都会尝试定义或覆盖名为 insert 的同一个节。这意味着如果在一个页面中多次 @include 这样的模板，实际上只有最后一次定义的 insert 节内容会生效，或者行为不符合预期，因为它们都在尝试写入同一个位置。

原始需求是希望能够动态生成并插入多个独立的表格行（<tr>），而不是定义一个单一的、可被覆盖的节。因此，将 @section 用于这种场景是不合适的，它无法实现多次独立的元素插入。

解决方案：利用Laravel Blade组件

Laravel Blade 组件是实现 UI 元素复用和模块化的最佳实践。它们允许你将复杂的 UI 片段封装成独立的、可复用的单元，拥有自己的逻辑和视图，并通过属性（props）接收数据。使用组件能够带来以下显著优势：

• 封装性： 将 HTML 结构和相关逻辑封装在一起。
• 可复用性： 轻松在应用的不同部分复用 UI 元素。
• 清晰的 API： 通过明确的属性定义组件的输入，易于理解和使用。
• 提升可读性与维护性： 主模板代码更简洁，组件内部逻辑清晰，便于后期维护。

创建Blade组件

为了实现表格行的复用，我们将创建一个名为 TableRow 的 Blade 组件。

步骤一：生成组件文件

通过 Artisan 命令可以快速生成组件所需的文件：

php artisan make:component TableRow

执行此命令后，Laravel 会在以下两个位置创建文件：

• 组件类文件： app/View/Components/TableRow.php (用于定义组件的逻辑和属性)
• 组件视图文件： resources/views/components/table-row.blade.php (用于定义组件的 HTML 结构)

步骤二：定义组件逻辑 (app/View/Components/TableRow.php)

打开 app/View/Components/TableRow.php 文件，修改其内容以接收表格行所需的 th、name 和 val 参数。这些参数将作为公共属性暴露给组件视图。

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class TableRow extends Component
{
    public $th;
    public $name;
    public $val;

    /**
     * 创建一个新的组件实例。
     *
     * @param string $th 表头文本
     * @param string $name 输入字段的name属性
     * @param string $val 输入字段的value属性
     * @return void
     */
    public function __construct($th, $name, $val)
    {
        $this->th = $th;
        $this->name = $name;
        $this->val = $val;
    }

    /**
     * 获取表示组件的视图/内容。
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.table-row');
    }
}

在 __construct 方法中，我们定义了组件接收的参数，并将它们赋值给公共属性。render 方法则指定了组件对应的视图文件。

步骤三：编写组件视图 (resources/views/components/table-row.blade.php)

打开 resources/views/components/table-row.blade.php 文件，编写表格行的 HTML 结构，并使用组件的公共属性来填充动态内容：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

<tr>
    <th>{{ $th }}</th>
    <td>
        <input type="text" name="{{ $name }}" value="{{ $val }}">
    </td>
</tr>

这里，$th、$name 和 $val 会自动从组件类中传递过来。

在主模板中使用组件

现在，你可以在任何 Blade 模板中像 HTML 标签一样使用你的 TableRow 组件。Laravel 会自动识别以 x- 开头的标签并将其解析为对应的 Blade 组件。

修改你的 main.blade.php 文件，使用 x-table-row 组件来插入表格行：

<table class="table">
  <x-table-row :th="'th1'" :name="'name1'" :val="'val1'"/>
  <x-table-row :th="'th2'" :name="'name2'" :val="'val2'"/>
  <x-table-row :th="'th3'" :name="'name3'" :val="'val3'"/>
  {{-- 你可以根据需要插入更多行 --}}
</table>

代码解释：

• <x-table-row />：这是使用 TableRow 组件的语法。Laravel 会将 PascalCase 的组件类名 (TableRow) 转换为 kebab-case 的 HTML 标签名 (table-row)。
• :th="'th1'"：这是向组件传递属性的方式。冒号 : 表示后面的值是一个 PHP 表达式。因此，'th1' 是一个字符串字面量。如果你要传递一个变量，例如 $item->title，则直接写 :th="$item->title"。

通过这种方式，每次 <x-table-row /> 标签被解析时，都会创建一个独立的 TableRow 组件实例，并渲染其对应的视图，从而生成多个独立的表格行，完美解决了原问题中 @section 导致的覆盖问题。

注意事项与最佳实践

• 何时使用组件 vs. @include：
  • Blade 组件：适用于具有独立逻辑、需要接收参数、且在应用中多处复用的 UI 片段（如按钮、卡片、模态框、表格行等）。它们提供了更强的封装性和更清晰的 API。
  • @include：适用于简单的模板片段复用，例如将一个表单的通用部分拆分出来，或者一个不带任何逻辑的纯 HTML 片段。它不提供独立的逻辑层。
• 命名规范： 组件类名通常使用 PascalCase (如 TableRow)，对应的视图文件和在模板中使用的标签名通常使用 kebab-case (如 table-row 和 <x-table-row>)。
• 属性传递： 务必使用冒号 : 进行属性绑定，以确保传递的是 PHP 表达式而不是字面量字符串。例如，value="some_string" 会传递字符串 "some_string"，而 :value="'some_string'" 也会传递字符串 "some_string"，但 :value="$variable" 才能正确传递 PHP 变量 $variable 的值。
• 插槽 (Slots)： 对于更复杂的组件内容，例如需要在组件内部插入任意 HTML 的情况，可以利用 Blade 组件的插槽功能 ({{ $slot }} 或命名插槽 {{ $namedSlot }})，这使得组件更加灵活和强大。

总结

通过采用 Laravel Blade 组件，我们成功地将表格行的渲染逻辑封装成了一个可复用的、参数化的单元。这不仅解决了 @section 在重复元素插入时的局限性，更重要的是，它极大地提升了前端代码的模块化、可读性和可维护性。在构建现代 Laravel 应用时，熟练运用 Blade 组件是实现高效、优雅代码组织的关键实践之一。

以上就是Laravel Blade 中高效复用表格元素：组件化实践的详细内容，更多请关注php中文网其它相关文章！