如何在 Laravel 8 中创建和使用组件

如何在 Laravel 8 中创建和使用组件

Scroll Down

组件是我们可以在 Laravel 应用程序中使用的可重用部分或布局。在 Laravel 中有两种编写组件的方法:基于类的组件和匿名组件。
在本文中,我们将通过以下几点来了解 Laravel 8 中组件的完整概念 -

  • 创建组件
  • 与 Laravel 组件关联的文件
  • 在 Laravel 中使用组件
  • 关于 Laravel 中的插槽
  • 向组件传递数据
  • 关于 Laravel 中的内联组件

创建组件

要在 laravel 中创建基于类的组件,我们使用 make:component 命令。返回终端并键入此命令以创建它。

$ php artisan make:component Message

当我们运行它时,它会在 setup 中创建几个文件。让我们看看这些文件是什么。

与 Laravel 组件关联的文件

make:component命令创建一个视图模板文件以及一个组件类文件。查看布局文件,我们会在/resources/views/components/message.blade.php 中找到。除了这个视图文件,我们还有一个组件类文件。我们可以在/app/View/Components/Message.php 中找到类文件

组件的布局文件提供了用户界面意味着组件如何呈现给应用程序。组件的类文件管理组件功能。在类文件中,我们应该看到两个方法__construct()render()。我们将在这篇正在进行的文章中稍微了解我们如何使用这些方法。

在 Laravel 中使用组件

在上面的步骤中,我们成功地创建了一个组件布局和它的功能文件。接下来,我们需要在应用程序中使用它。

要使用组件,我们在任何模板文件或布局中使用“Blade组件标签”。Blade 组件标签以字符串 x- 开头,后跟组件类的名称。

# 句法

<x-{组件名称}/>

在上面的例子中,我们有组件类名称作为消息。所以这很简单。

例子

/resources/views/about-us.blade.php 调用此视图文件中的组件。

<x-message/>

当我们有一些像 $ php artisan make:component DisplayMessage 这样的情况时。为了使用我们使用的这种类型的组件。

<x-display-message/>

关于 Laravel 中的插槽

Slot 用于获取我们在Blade组件标签中给出的内容。这处理与插槽相关的附加信息。

假设我们像这样调用组件。在这里面我们有一些内容。

<x-message>
  
    <strong>Great!</strong> Student has been created.
  
</x-message>


为了从刀片组件标签中获取放置的内容,我们在 Laravel 中使用 {{ $slot }} 预定义变量。回到组件布局文件——

LAYOUTS

<!-- /resources/views/components/message.blade.php -->

<div class="alert alert-danger">
  
    {{ $slot }}

</div>

{{ $slot }}变量将打印我们在组件标签中传递的所有内容。

向组件传递数据

我们可以传递两种类型的值。静态值和动态值。让我们看看如何传递数据。

<x-message type="warning" :message="$message"/>
  • “type”是包含作为警告值的键。它有一个静态值。
  • “:message”是一个通过变量包含动态值的键。

首先我们需要将数据属性值设置为变量,然后我们需要发送到布局文件。要设置这些值,请返回组件类文件。打开/app/View/Components/Message.php

Message.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Message extends Component
{
    /**
     * The message type.
     *
     * @var string
     */
    public $type;

    /**
     * message.
     *
     * @var string
     */
    public $message;

    /**
     * Create the component instance.
     *
     * @param  string  $type
     * @param  string  $message
     * @return void
     */
    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.message');
    }
}

​显示布局文件的数据属性

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

</div>
  • {{ $type }} Blade 语法来打印从它的类文件发送的 $type 的值。
  • {{ $message }} Blade 语法打印 $message 的值。

关于 Laravel 中的内联组件

内联组件是那些基本上只生成单个文件的组件,即组件类文件。在同一个类文件中,我们将有一个 render() 方法和一段编写在其中的内联 HTML 代码。

在常规组件中,我们有 2 个文件,但在内联的情况下,我们只有一个文件。

生成内联组件

要生成内联组件,我们使用 make:component artisan 命令,但这次我们将添加一个用于内联的额外标志。

$ php artisan make:component Message --inline

此命令将在组件文件中生成类似的内容。

Message.php

/**
 * Get the view / contents that represent the component.
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}
        </div>
    blade;
}

在上面的代码中,我们可以看到在 render() 中有 HTML 标记。

我们希望本文能帮助您以非常详细的方式了解 Laravel 8 教程中的组件。