Laravel 组件
创建组件命令
php artisan make:component Alert
make:component 命令还将为组件创建视图模板。视图将放在 resources/views/components 目录中。为自己的应用程序编写组件时,组件会在 app/View/components 目录和 resources/views/components 目录中自动发现,因此通常不需要进一步的组件注册。
也可以在子目录中创建组件:php artisan make:component Forms/Input
上面的命令将在 App\View\Components\Forms 目录中创建一个 Input 组件,该视图将放在 resources/views/Components/Forms 目录中。
渲染组件
要显示组件,可以在其中一个 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"/>
你应该在组件类的构造函数中定义组件所需的数据。组件上的所有公共属性将自动提供给组件的视图。不必从组件的 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>
转载于:https://blog.csdn.net/qvtcxxjs/article/details/123299785
本文来自博客园,作者:飞龙在生,转载请注明原文链接:https://www.cnblogs.com/flzs/p/18305876