当前位置：首页 > 文章列表 > 文章 > php教程 > LaravelBlade模板使用与继承详解

LaravelBlade模板使用与继承详解

2026-01-25 18:03:48 0浏览收藏

大家好，我们又见面了啊~本文《Laravel Blade模板使用与继承教程》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

Blade模板继承通过@yield和@section实现布局复用，组件化则利用标签和插槽封装UI元素，结合使用提升Laravel项目前端可维护性与开发效率。

Laravel框架怎么使用Blade模板_Laravel模板继承与组件化开发

在Laravel中，Blade 是一个简单却强大的模板引擎，它允许你使用简洁的语法编写视图，并通过模板继承和组件化实现高效的页面结构复用。掌握 Blade 的继承机制与组件开发方式，能显著提升前端代码的可维护性和开发效率。

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

Blade 的模板继承让你可以定义一个基础页面布局，然后在不同子页面中填充特定内容。

首先创建一个通用布局文件，比如 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>
    <header>
        <h1>我的网站</h1>
        @section('sidebar')
            <p>这是默认侧边栏内容</p>
        @show
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>© 2025 公司名称</p>
    </footer>
</body>
</html>

说明：

@yield('title') 定义可选的内容占位，支持默认值。
@section ... @show 定义可被覆盖的区块，子模板可用 @extends 继承并替换内容。

接着创建子页面，例如 resources/views/home.blade.php：

@extends('layouts.app')

@section('title', '首页')

@section('sidebar')
    <p>这里是首页的侧边栏</p>
@endsection

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

渲染时，Blade 会将子页面的内容注入到父布局对应的位置。

组件化开发：封装可复用UI元素

Blade 组件让你可以把常用的UI模块（如按钮、卡片、表单字段）封装成独立单元，在多个页面中重复使用。

以创建一个按钮组件为例：

在 resources/views/components 目录下创建 button.blade.php
编写组件模板：

<button type="{{ $type ?? 'button' }}" class="btn btn-{{ $variant ?? 'primary' }}">
    {{ $slot }}
</button>

其中：

$slot 表示组件的默认插槽内容。
$type 和 $variant 是传递给组件的属性，支持默认值。

在视图中使用该组件：

<x-button variant="success" type="submit">
    提交表单
</x-button>

<x-button variant="danger">
    删除
</x-button>

Laravel 会自动解析 x- 开头的标签为 Blade 组件。

高级组件技巧：命名插槽与属性传递

复杂组件常需要多个内容区域，这时可用命名插槽。

例如创建一个模态框组件 modal.blade.php：

<div class="modal">
    <div class="modal-header">
        {{ $header }}
    </div>
    <div class="modal-body">
        {{ $slot }}
    </div>
    <div class="modal-footer">
        {{ $footer }}
    </div>
</div>

使用时通过填充指定区域：

<x-modal>
    <x-slot name="header">
        <h3>确认操作</h3>
    </x-slot>

    <p>你确定要执行此操作吗？</p>

    <x-slot name="footer">
        <button type="button" class="btn btn-secondary">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
    </x-slot>
</x-modal>

此外，可通过 $attributes 接收额外HTML属性，比如class或data-*：

<button {{ $attributes->merge(['class' => 'btn']) }}>
    {{ $slot }}
</button>

这样调用时可添加自定义类名：点击，最终合并输出。

基本上就这些。Blade 的模板继承适合构建整体页面结构，而组件化则利于拆分和复用UI模块。两者结合，能让 Laravel 项目的前端组织更清晰、更高效。

本篇关于《LaravelBlade模板使用与继承详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

PHP框架

中国大学MOOC考研课程怎么报

上一篇: 中国大学MOOC考研课程怎么报

下一篇: 爱发电更换支付账户步骤详解

查看更多