一个Blade视图实现继承定义好布局文件的子视图：在子视图

一个Blade视图实现继承定义好布局文件的子视图：在子视图

　　高级刀片模板引擎：模板继承和组件介绍

　　College Jun 2 年前创建，最后更新 1 年前 版本号#117008 views16 likes0 采集

　　除了基本的数据渲染和控制结构指令，Blade还提供了模板继承和组件导入功能，允许视图模板之间的继承、覆盖和导入。

　　使用@yield 和@section/@show 在布局文件中定义槽

　　在理解Blade模板继承时，我们可以对比一个类的继承机制：在父类中定义抽象方法或公共方法，然后在子类中实现抽象方法或覆盖公共方法。在视图文件中，这个“父类”一般对应于布局文件。不同的功能模块往往有不同的页面布局，如前台、后台、用户中心等。页面布局通常是不同的。 “子类别”对应不同功能模块的各个子视图页面，例如首页、文章detail 页面、文章Edit 页面等。

　　我们先来看一个布局文件的例子：

Laravel学院 | @yield('title', '首页')

@yield('content')

@section('footerScripts')

@show

　　在这个布局文件中，我们使用了两个 Blade 指令。 @yield 用于指定子视图需要继承的内容块。我们可以将第二个参数传递给指令来指定何时不继承子视图。 @section/@show 的默认值也用于指定子视图需要继承的内容块，提供默认的块内容。与@yield 不同的是@section/@show 指定的默认内容子视图可以通过@parent 访问，而@yield 指定的默认内容对子视图不可见。

　　通过@extends 和@section/@endsection 在子视图中继承

　　定义好布局文件后，我们来定义继承布局文件的子视图：

@extends('layouts.master')

@section('title', '管理后台')

@section('content')

环境访问 Laravel 学院后台！

@endsection

@section('footerScripts')

@parent

@endsection

　　在子视图中，我们已经实现了布局文件中定义的需要子视图继承和实现的块内容：

　　通过@include 引入其他视图组件

　　除了

　　的单继承机制

　　和PHP类一样，也可以通过Trait横向扩展功能。 Blade 视图还可以使用@include 指令引入其他组件来改进页面功能。同时，这些组件可以在不同的视图文件中共享，提高了代码的复用性。比如我们定义一个点击按钮组件：

<a class="button button--callout" data-page-name="{{ $pageName }}">

{{ $text }}

</a>

　　然后你可以在其他视图中通过@include引入这个组件：

<p>为什么要注册 Laravel 学院: 能提供更多服务

@include('sign-up-button', ['text' => '看看到底有哪些服务'])

</p>

　　导入组件时，可以通过第二个参数指定需要在组件中使用的变量。

　　注意：您也可以不明确指定要传递的参数。组件视图可以访问引入它的视图中的所有变量，但不建议这样做。如果由多个视图引入，很容易造成混淆。

　　通过@each 指令递归引入单个组件

　　在某些情况下，您可能需要遍历集合并在循环中引入单个组件。这可以通过@each 指令快速实现。比如我们的侧边栏是由多个模块组成的（每个模块的DOM结构是一样的，可以被单个组件多次复用），我们需要循环引入模块组件，并为它们设置不同的标题，通过@each指令，我们可以做到：

@each('partials.module', $modules, 'module', 'partials.empty-module')

{{ $module->title }}

No modules :(

　　@each 指令支持多个参数。第一个参数用于指定循环中要引入的组件的名称，第二个参数是要遍历的集合变量，第三个参数是引入的组件中使用的变量的名称（对应单个$modules集合中的元素），最后一个参数是集合数据为空时引入的默认组件。

　　通过@slot和@component实现更灵活的内容分发

　　从Laravel5.4开始，除了通过@include引入组件外，还可以使用@slot和@component指令在Blade中实现更灵活的内容分发。这个特性应该借鉴自 Vue.js ，Vue 组件中也有的特性。

　　要在 Blade 中使用插槽分发内容，您首先需要创建相应的组件：

{{ $slot }}

　　然后在需要引入的地方通过@component引入组件：

　　@component('alert')

哎呦! 出错啦!

@endcomponent

　　@component 的第一个参数对应于要导入的组件的名称。导入组件中 $slot 变量的值由导入时@component 和@endcomponent 之间的块的内容指定。这个通过slots分发内容的功能的灵活性在于，可以在引入组件的地方定义要渲染的block的内容。换句话说，$slot 的作用域是组件应该在引入它的父视图中显示的内容。由引入它的视图决定。

　　与@include 一样，@component 也支持向组件传递额外的可变参数。比如我们修改组件文件如下：

{{ $title }}

{{ $slot }}

　　然后就可以在引入的地方传入参数指定$title的值：

　　@component('alert', ['title' => $title])

哎呦! 出错啦!

@endcomponent