Laravel Blade 组件和插槽即将在 5.4 中推出

即将在 Laravel 5.4 中推出的新功能是允许您向 Blade 模板添加组件和插槽的功能。此功能受 Vue.js 启发，可简化将 HTML 元素构建为可重复使用的区域的过程。

在大多数应用程序中，您都有一个主布局，然后是扩展它的子视图

// layouts/app.blade.php
 
<html lang="en">
    <head>
    ...
    </head>
    <body>
    @yield('content')
 
---
 
// home.blade.php
@extends('layouts.app')
@section('content')
    <h1>Home Page</h1>
@endsection

例如，假设您想在首页添加一个警报。使用新的 Laravel Blade 组件，您可以创建一个 inc/alert.blade.php 文件并添加一个特殊的 $slot 变量

<div class="alert">
    {{ $slot }}
</div>

然后在您的 home.blade.php 文件中

@extends('welcome')
 
@section('content')
<div>
    <h1>Home Page</h1>
    @component('inc.alert')
        This is the alert message here.
    @endcomponent
</div>
@endsection

这使您可以轻松定义将在组件的 $slot 变量中出现的文本或 HTML。

重新构想视图与插槽和组件

除了创建一个警报的简单示例外，您现在还可以执行以下操作：使用带有 $slot 变量的基本布局，并使用子视图来完全驱动设计。以下是一个示例

// layouts/app.blade.php
<html>
    <head>
        <title>{{ $title or 'Laravel News' }}</title>
    </head>
 
    <body>
        <div class="container">
            {{ $slot }}
        </div>
    </body>
</html>

然后，如果您调用 home.blade.php，您可以执行以下操作

@component('layouts.app')
    @slot('title')
        Home Page
    @endslot
 
    <div class="col-6">
        @component('inc.alert')
            This is the alert message here.
        @endcomponent
        <h1>Welcome</h1>
    </div>
    <div class="col-6">
        @component('inc.sidebar')
            This is my sidebar text.
        @endcomponent
    </div>
@endcomponent