PHP 模板引擎 二 ----Blade（.blade.php文件）组件化开发 @component) 使用详解

场景

我们在使用Blade 模板开发中，会遇到一些重复使用比较的多的代码，比如弹框等等。
这些不只是在一个页面会使用的代码块，就可以提出来各页面共用。使用Blade中的组件和插槽。

基础的 组件&插槽 使用

{{ $slot }} 变量

现今假设有一个可复用的组件 errorPage.blade.php,内容大致为：

<!-- 存储在 /resources/views/components/errorPage.blade.php -->

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

{{ $slot }} 变量就是我们想要注入到子组件的内容。

使用@component 指令引入子视图。以@endcomponent结束引入。
在父视图中引用组件 errorPage.blade.php ，父组件demo.blade.php的内容如下：

{{-- 存储在 /resources/views/demo.blade.php --}}

{{-- 父引入resources/views/components 下的 errorPage.blade.php子视图 --}}

@component('components.errorPage')
    <p>阿偶，发生错误了！！！！</p>
@endcomponent

运行结果：

{{ $自定名称 }} 命名变量

有时候为一个组件定义多个插槽是很有用的。修改 errorPage.blade.php内容,内容大致为：

<!-- 存储在 /resources/views/components/errorPage.blade.php -->

<div class="error">
	{{ $slot }}
    {{$mySlot}}
</div>

修改父视图内容，父组件demo.blade.php的内容如下：

{{-- 存储在 /resources/views/demo.blade.php --}}

@component('components.errorPage')
    <p>阿偶，发生错误了！！！！</p>
    
    @slot('mySlot')
        <p>阿偶，mySlot 发生错误了！！！！</p>
    @endslot
@endcomponent

现在我们可以使用@slot 指令向命名插槽注入内容
@slot('mySlot') 的参数以子组件相匹配，以@endslot 收尾，结束注入代码片段；不在 @slot 指令内的内容都将传递给组件中的 $slot 变量：

给组件起别名

有时候组件的路路径太深，写着很繁琐，你可能需要给组件起别名。
假设你要给 存储在 /resources/views/components/errorPage.blade.php 中的组件，起别名就可以使用 Blade 的 component 方法，将 components.errorPage 的别名改为 errorPage

首先找到项目 Providers 目录下的 AppServiceProvider.php 文件，使用其中的 boot 方法实现：

在顶部引入 Blade，在 boot 方法中 添加更名代码

<?php

namespace App\Providers;
use Illuminate\Support\Facades\Blade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::component('components.errorPage', 'errorPage');
    }
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {}
}

使用方法：

一旦组件有了别名，就可以使用一条指令渲染它。在父视图中，就可以使用 @+别名 引入子视图即可。
如果没有 额外的命名插槽的话，可以省略组件参数

@errorPage
   <p>阿偶，发生错误了！！！！</p>
@errorPage

显示数据

可以通过包裹在双花括号内的变量显示传递给 Blade 视图的数据
就可以利用 name变量名 显示其内容

	Hello, {{ $name }}.

还可以用于显示任一 PHP 函数的结果

	Hello, {{ getname() }}.

显示非转义字符

默认情况下， Blade 中 {{ }} 语句自动经由 PHP 的 htmlspecialchars 函数传递以防范 XSS 攻击。如果不希望数据被转义，就使用 {!! $变量名 !!}，下面的语法：

	Hello, {!! $style !!}.