LaravelBlade模板怎么用_LaravelBlade模板语法继承及组件使用指南-php教程-PHP中文网

LaravelBlade模板怎么用_LaravelBlade模板语法继承及组件使用指南

星夢妙者

发布： 2025-11-23 21:31:02

原创

552人浏览过

Laravel Blade通过模板继承和组件系统提升前端开发效率。首先定义包含@yield和@section的布局文件，子页面用@extends继承并填充内容；其次利用Artisan命令创建组件，通过<x-component>语法复用UI元素，支持默认插槽与命名插槽，实现灵活内容分发，构建可维护的页面结构。

laravelblade模板怎么用_laravelblade模板语法继承及组件使用指南

Laravel Blade 是 Laravel 框架自带的轻量级、强大且直观的模板引擎。它允许开发者通过简洁的语法编写 PHP 模板，同时支持模板继承、组件复用、条件判断、循环等功能，极大提升前端开发效率。本文将详细介绍 Blade 的核心用法，重点讲解模板继承与组件使用方法。

模板继承：布局与内容占位

Blade 的模板继承机制允许你定义一个基础布局文件（layout），然后在其他页面中继承并填充特定区域。

1. 定义主布局（layout）
创建一个通用布局文件，例如 resources/views/layouts/app.blade.php：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', '默认标题')</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <div class="container">
        @section('sidebar')
            <div class="sidebar">这是默认侧边栏</div>
        @show

        <main>
            @yield('content')
        </main>
    </div>
</body>
</html>

登录后复制

说明：

@yield('title')：定义可被子页面替换的内容区域，第二个参数为默认值。
@section ... @endsection 或 @section ... @show：定义可重写或追加的区块。@show 表示在父模板中也输出内容。

2. 继承布局并填充内容
在子页面中使用 @extends 继承布局，再用 @section 填充内容。

<!-- resources/views/home.blade.php -->
@extends('layouts.app')

@section('title', '首页 - 我的网站')

@section('sidebar')
    <div class="sidebar">
        <h3>首页专属侧边栏</h3>
        <p>这里是首页的导航</p>
    </div>
@endsection

@section('content')
    <h1>欢迎来到首页</h1>
    <p>这是主页的主要内容。</p>
@endsection

登录后复制

组件（Components）：构建可复用 UI 元素

Blade 组件是 Laravel 提供的一种封装 HTML 结构和逻辑的方式，适合按钮、卡片、模态框等重复使用的界面元素。

1. 创建组件
使用 Artisan 命令生成组件：

php artisan make:component Alert

登录后复制

这会生成：

app/View/Components/Alert.php（组件类）
resources/views/components/alert.blade.php（视图文件）

2. 编写组件逻辑与视图

组件类（Alert.php）：

```php class Alert { public $type;

public function __construct($type = 'info') 
{
    $this->type = $type;
}

public function render()
{
    return view("components.alert");
}

登录后复制

}

BeatBot

Splash的AI音乐生成器，AI歌曲制作人！

165

查看详情

<p><strong>组件视图（alert.blade.php）：</strong></p>
```blade
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

登录后复制

3. 在页面中使用组件

<x-alert type="success">
    操作成功！数据已保存。
</x-alert>

<x-alert>
    这是一条普通提示信息。
</x-alert>

登录后复制

说明：

<x-alert></x-alert> 是组件调用语法。
$slot 代表组件标签之间的内容。
属性如 type 会自动传递给组件类的构造函数。

插槽（Slots）：更灵活的内容分发

除了默认插槽，Blade 还支持命名插槽，用于多区域内容注入。

1. 组件中定义多个插槽

<!-- resources/views/components/card.blade.php -->
<div class="card">
    <div class="card-header">
        {{ $header ?? '' }}
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
    @if(isset($footer))
    <div class="card-footer">
        {{ $footer }}
    </div>
    @endif
</div>

登录后复制

2. 使用命名插槽

<x-card>
    <x-slot name="header">
        <h3>卡片标题</h3>
    </x-slot>

    <p>这里是卡片主体内容。</p>

    <x-slot name="footer">
        <small>发布时间：2025年</small>
    </x-slot>
</x-card>

登录后复制

这样可以清晰地组织结构化内容，特别适用于复杂组件。

基本上就这些。掌握 Blade 的模板继承和组件系统后，你可以高效构建结构清晰、易于维护的 Laravel 前端页面。不复杂但容易忽略细节，建议多实践常见布局和自定义组件。

以上就是LaravelBlade模板怎么用_LaravelBlade模板语法继承及组件使用指南的详细内容，更多请关注php中文网其它相关文章！