Laravel Blade模板-组件
# 创建组件
使用 make:component 创建组件，将保存到 App\View\Components 目录中。
make:component 命令还将为组件创建视图模板。视图将放在 resources/views/components 目录中。为自己的应用程序编写组件时，组件会在 app/View/components 目录和 resources/views/components 目录中自动发现，因此通常不需要进一步的组件注册。
php artisan make:component Alert
# 在子目录中创建组件
php artisan make:component Forms/Input
1
2
3
4
2
3
4
# 渲染组件
组件标记已 x- 开头。
<x-alert/>
<x-user-profile/>
1
2
3
2
3
如果组件类嵌套在 App\View\Components 目录的更深处，则可以使用 . 字符表示目录嵌套。例如，如果我们假设一个组件位于 App\View\Components\Inputs\Button.php ，我们可以这样处理：
<x-inputs.button/>
1
# 各组件出传递数据
你可以使用 HTML 属性将数据传递给 Blade 组件。硬编码、原始值可以使用简单的 HTML 属性字符串传递给组件。PHP 表达式和变量应通过使用 : 字符作为前缀的属性传递给组件，类似于 VUE 的组件语法。
<x-alert type="error" :message="$message"/>
1
应该在组件类的构造函数中定义组件所需的数据。组件上的所有公共属性将自动提供给组件的视图。不必从组件的 render 方法将数据传递到视图：
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');
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
组件中直接使用公共变量
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>
1
2
3
2
3
# 命名规范
应使用 camelCase 指定组件构造函数参数，而在 HTML 属性中引用参数名称时应使用 kebab-case
/**
* 创建组件实例
*
* @param string $alertType
* @return void
*/
public function __construct($alertType)
{
$this->alertType = $alertType;
}
// 视图中
<x-alert alert-type="danger" />
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# : js 框架冲突
可以使用 :: 告知 Blade 这不是一个 PHP 表达式，将原样输出。
# 组件方法
除了组件模板可用的公共变量外，还可以调用组件上的任何公共方法。
/**
* 确定给定选项是否为当前选定的选项。
*
* @param string $option
* @return bool
*/
public function isSelected($option)
{
return $option === $this->selected;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
使用
<option {{ $isSelected($value) ? 'selected="selected"' : '' }} value="{{ $value }}">
{{ $label }}
</option>
1
2
3
2
3
# 手动注册组件
use Illuminate\Support\Facades\Blade;
/**
* 启动你的扩展包的服务
*/
public function boot()
{
Blade::component('package-alert', Alert::class);
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上次更新: 2023/09/22, 16:54:32