在Laravel项目里，当多个页面都需要展示样式统一的图表卡片时，重复编写相同的HTML和样式代码会浪费大量时间，后续修改样式也需要逐个调整，维护成本很高。Blade模板的组件化功能可以把这类通用视图封装成独立组件，实现一次定义多次复用。
创建基础图表卡片组件
首先需要通过Artisan命令创建Blade组件，执行以下命令会生成组件类文件和对应的视图文件：
php artisan make:component ChartCard
执行完成后，组件类会存放在app/View/Components/ChartCard.php，视图文件存放在resources/views/components/chart-card.blade.php。
编写组件类逻辑
组件类负责接收外部传入的参数，我们可以在类中定义公开的属性来存储这些参数：
<?php
namespace AppViewComponents;
use IlluminateViewComponent;
class ChartCard extends Component
{
// 定义卡片标题、图表ID、卡片宽度等属性
public $title;
public $chartId;
public $width;
/**
* 组件构造函数，接收外部传入的参数
* @param string $title 图表卡片标题
* @param string $chartId 图表容器ID
* @param string $width 卡片宽度，默认占满父容器
*/
public function __construct($title = '默认图表', $chartId = 'defaultChart', $width = '100%')
{
$this->title = $title;
$this->chartId = $chartId;
$this->width = $width;
}
/**
* 渲染组件视图
*/
public function render()
{
return view('components.chart-card');
}
}
编写组件视图内容
接下来在resources/views/components/chart-card.blade.php中编写图表卡片的HTML结构，使用组件类的属性来动态渲染内容：
<div class="chart-card" style="width: {{ $width }}; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 16px;">
<h3 class="chart-title" style="font-size: 16px; margin-bottom: 12px; color: #1f2937;">{{ $title }}</h3>
<div class="chart-container" style="width: 100%; height: 300px;">
<canvas id="{{ $chartId }}"></canvas>
</div>
</div>
在页面中复用图表卡片组件
组件定义完成后，就可以在任意Blade模板中直接调用了，不需要重复编写卡片的HTML结构。
基础调用方式
使用<x-组件名>的语法来调用组件，通过属性传递参数：
<!-- 调用默认参数的图表卡片 -->
<x-chart-card />
<!-- 传递自定义参数的图表卡片 -->
<x-chart-card
title="月度销售额趋势"
chartId="monthSalesChart"
width="48%"
/>
使用插槽扩展组件内容
如果需要在卡片中添加额外的说明内容，可以使用Blade的插槽功能。首先修改组件视图，添加插槽占位：
<div class="chart-card" style="width: {{ $width }}; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 16px;">
<h3 class="chart-title" style="font-size: 16px; margin-bottom: 12px; color: #1f2937;">{{ $title }}</h3>
<div class="chart-container" style="width: 100%; height: 300px;">
<canvas id="{{ $chartId }}"></canvas>
</div>
<!-- 插槽占位，用于插入额外内容 -->
<div class="chart-extra" style="margin-top: 12px; font-size: 14px; color: #6b7280;">
{{ $slot ?? '' }}
</div>
</div>
调用时可以在组件标签内部添加插槽内容：
<x-chart-card
title="月度销售额趋势"
chartId="monthSalesChart"
width="48%"
>
本月销售额较上月增长12%，整体趋势向好
</x-chart-card>
匿名组件的使用场景
如果组件逻辑非常简单，不需要自定义组件类，也可以使用匿名组件。直接在resources/views/components目录下创建simple-chart-card.blade.php文件，内容如下：
<div class="simple-chart-card" style="padding: 12px; border: 1px solid #ddd; border-radius: 6px;">
<h4>{{ $title }}</h4>
<div id="{{ $chartId }}" style="height: 200px;"></div>
</div>
调用时直接传递参数即可，不需要提前定义组件类：
<x-simple-chart-card title="简易访问量图表" chartId="visitChart" />
组件复用注意事项
- 组件命名要清晰，建议和组件功能对应，比如图表卡片组件命名为
ChartCard，方便后续识别和维护。 - 组件参数尽量设置默认值，避免调用时缺失参数导致报错。
- 如果组件需要在多个项目中复用，可以把组件封装成独立的包，通过Composer安装使用。
- 组件内部的样式建议尽量使用内联样式或者 scoped 样式，避免影响其他组件的样式。
通过Blade组件化功能封装图表卡片这类通用视图，能够大幅减少重复代码，提升开发效率，后续修改样式也只需要调整组件文件即可，非常适合中大型Laravel项目的视图管理。