组件组件组件

Laravel 组件

创建组件命令

php artisan make:component Alert

make:component 命令还将为组件创建视图模板。组件将放在 resources/views/components 目录中。为自己的应用程序编写组件时，组件会在 app/View/components 目录和 resources/views/components 目录中自动发现，因此通常不需要进一步的组件注册。
通过上面的命令，会在 resources/views/components 目录中生成一个alert.blade.php文件，
在 app/View/components 目录中生成一个Alert.php文件

也可以在子目录中创建组件：

php artisan make:component Forms/Input
上面的命令将在 App\View\Components\Forms 目录中创建一个 Input 组件，该视图将放在 resources/views/Components/Forms 目录中。

编辑组件内容

在alert.blade.php文件中写入如下代码：

<div class="alert alert-error">我是组件</div>
<style>
  .alert {
    height: 100px;
    border-radius: 8px;
    padding: 3px 20px;
    margin: 10px auto;
    box-shadow: 1px 1px 5px 3px #888;
  }
  .alert-error {
    background-color: red;
  }
</style>

渲染组件

在 Blade 模板中添加代码：

<x-alert></x-alert>

要显示组件，可以在其中一个 Blade 模板中使用 Blade 组件标记。Blade 组件标记以字符串 x- 开头，后跟组件类的蛇形名称：
<x-alert/> 或者 <x-alert></x-alert>
<x-user-profile/> 或者 <x-user-profile/> </x-user-profile>
如果组件类嵌套在 App\View\Components 目录的更深处，则可以使用 . 字符表示目录嵌套。例如，如果我们假设一个组件位于 App\View\Components\Forms\Input.php ，我们可以这样处理：
<x-forms.input/>

给组件传递数据

可以使用 HTML 属性将数据传递给 Blade 组件。硬编码、原始值可以使用简单的 HTML 属性字符串传递给组件。PHP 表达式和变量应通过使用 : 字符作为前缀的属性传递给组件：
<x-alert type="error" :message="$message"/>

类似于 VUE 组件语法

你应该在组件类的构造函数中定义组件所需的数据。组件上的所有公共属性将自动提供给组件的视图。不必从组件的 render 方法将数据传递到视图。以下是app/View/components目录下的Alert.php文件。

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * The alert type.
     *
     * @var string
     */
    public $type;

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

    /**
     * 创建组件实例
     *
     * @param  string  $type
     * @param  string  $message
     * @return void
     */
    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * 将一个视图或者字符串传递给组件用于渲染
     *
     * @return \Illuminate\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

渲染组件时，可以通过按名称回显变量来显示组件公共变量的内容：

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

驼峰命名

应使用 camelCase 指定组件构造函数参数，而在 HTML 属性中引用参数名称时应使用 kebab-case。例如，给定以下组件构造函数：

/**
 * 创建组件实例
 *
 * @param  string  $alertType
 * @return void
 */
public function __construct($alertType)
{
    $this->alertType = $alertType;
}

$alertType 参数可以使用如下所示的方式接受数据：
<x-alert alert-type="danger" />

访问组件类中的属性和插槽

Blade 组件还允许你访问类的 render 方法中的组件名称、属性和插槽。但是，为了访问这些数据，应该从组件的 render 方法返回闭包。闭包将接收一个 $data 数组作为它的唯一参数。此数组将包含几个元素，这些元素提供有关组件的信息：

/**
 * 获取表示组件的视图/内容
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return function (array $data) {
        // $data['componentName'];
        // $data['attributes'];
        // $data['slot'];
                 return 'components.alert';

        return '<div>Components content</div>';

        return <<<'blade'
                <div class="alert alert-danger">
                    {{ $message }}
                </div>
            blade;
    };
}

组件传递的数据无法修改,修改数据可以在构造函数中修改。

闭包应该返回一个字符串。如果返回的字符串与现有视图相对应，则将呈现该视图；否则，返回的字符串将作为内联 Blade 视图进行计算。

插槽

通常需要通过 「插槽」 将其他内容传递给组件。通过回显 $slot 变量来呈现组件插槽。为了探索这个概念，我们假设 alert 组件具有以下内容： 类似 VUE

/resources/views/components/alert.blade.php

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

我们可以通过向组件中注入内容将内容传递到 slot ：

<x-alert> <strong>Whoops!</strong> Something went wrong! </x-alert>

有时，组件可能需要在组件内的不同位置渲染多个不同的插槽。让我们修改警报组件以允许注入 「标题」插槽：

<span class="alert-title">{{ $title }}</span>

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

可以使用 x-slot 标记定义命名插槽的内容。任何不在显式 x-slot 标记中的内容都将传递给 $slot 变量中的组件：

<x-alert>
  <x-slot name="title"> Server Error </x-slot>

  <strong>Whoops!</strong> Something went wrong!
</x-alert>

作用域插槽

如果你使用过诸如 Vue 之类的 JavaScript 框架，那么你可能熟悉 「作用域插槽」，它允许你从插槽中的组件访问数据或方法。通过在组件上定义公共方法或属性，并通过 $component 变量访问插槽中的组件，可以在 Laravel 中实现类似的行为。在本例中，我们假设 x-alert 组件在其组件类上定义了一个公共的 formatAlert 方法：

<x-alert>
  <x-slot name="title"> {{ $component->formatAlert('Server Error') }} </x-slot>

  <strong>Whoops!</strong> Something went wrong!
</x-alert>

内联组件视图

/**
 * 获取表示组件的视图/内容。
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}
        </div>
    blade;
}

使用组件布局

之前我们使用模板继承的方式进行布局。现在我们学习了组件 接下来我们使用组件的方式的来进行布局。

resources/views/components/layout.balde.php

<html>
  <head>
    <title>{{ $title ?? 'Todo Manager' }}</title>
    <style>
      .header {
        width: 100%;
        height: 100px;
        background-color: #f90;
      }
      .main {
        display: flex;
        width: 100%;
        min-height: 500px;
      }
      .ce {
        width: 300px;
        background-color: pink;
      }
      .content {
        width: 100%;
        background-color: #cbd5e0;
      }
    </style>
  </head>

  <body>
    <header class="header"></header>
    <div class="main">
      <div class="ce">我是侧边栏</div>
      <div class="content">{{ $slot }}</div>
    </div>
  </body>
</html>

应用布局组件

一旦定义了 layout 组件，我们就可以创建一个使用该组件的 Blade 视图。在本例中，我们将定义一个显示任务列表的简单视图：
resources/views/user.blade.php

<x-layout>
  <div>
    <h1>我是个人中心</h1>
  </div>
</x-layout>

请记住，注入到组件中的内容将提供给 layout 组件中的默认 $slot 变量。正如你可能已经注意到的，如果提供了 $title 插槽，那么我们的 layout 也会尊从该插槽；否则，将显示默认的标题。我们可以使用 x-slot 插入标题

<x-layout>
  <x-slot name="title"> Custom Title </x-slot>

  @foreach ($tasks as $task) {{ $task }} @endforeach
</x-layout>