Laravel 7 中的 Blade View Components （组件和插槽）

组件特性在 Laravel 已经存在，称为 Blade 指令。查看相关文档。
但是，在 Laravel 7 中，Blade 提升到了一个全新的水平。
接下来，我们将深入了解它。

在撰写本文时，Laravel 7 尚未发布，如果你想继续学习，可以使用以下命令下载它。

 laravel new projectname --dev

创建组件

新的 Artisan 命令可以轻松创建组件：

php artisan make:component Alert

此命令将创建两个文件

• 类文件：App\View\Components\Alert.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * 创建一个新的组件实例
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * 获取组件的视图/内容
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

• Blade 文件：resources/views/components/alert.blade.php

<div>
    <!-- He who is contented is rich. - Laozi -->
</div>

修改此 HTML ，以便在渲染它时可以看到该组件的运行情况。

<div>
    <h3>Alert Component</h3>
</div>

渲染组件

组件应在 Blade 模板中使用。在 Blade 文件中使用组件有一种特殊的语法。

x- 后面跟着组件类的短横线隔开命名法。

<x-alert />

在 welcome.blade.php 中使用 Alert 组件。

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>
                <div>
                    <x-alert/>
                </div>
            </div>

输出：

自动发现

Laravel会自动在 app / View / Components 目录和 resources / views / components 目录中寻找组件。

但组件嵌套在目录中，该怎么办？如： App\View\Components\Alerts\Success.php。

可以使用 . 符号来表示目录嵌套。

<x-alerts.success />

将数据传递到组件

我们可以通过 HTML 属性传递数据。这类似于在 Vue 组件中传递 props 。

• 基本或硬编码值

<x-alert type="error" />

• 变量和表达式应使用 : 前缀进行传递

<x-alert :message="$message" />

在组件的类中，此数据应通过构造函数提供。

class Alert extends Component
{
    public string $type;

    public string $message;

    public function __construct(string $type, string $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * 获取组件的视图/内容
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

请注意，这两个属性均设置为 public 。

所有公共属性将可用于组件的视图文件。您无需传递数据即可从 render() 方法进行查看。

alert.blade.php 可以将这些属性用作：

<div>
    <div class="alert alert-{{$type}}">
        <h3>{{$message}}</h3>
    </div>
</div>

关于 Blade 组件和插槽还有其他的使用方法:

• 匿名组件
• 访问视图中的 public 方法，但我想我应该在深入研究文章中介绍这一点

称为 First look 因为我在写本文时正在阅读文档 😂 .

请在下面的评论中告诉我你对 Blade 视图组件的想法。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://dev.to/zubairmohsin33/first-look...

译文地址：https://learnku.com/laravel/t/41693