货物

什么是 Laravel 组件以及如何使用它们

Laravel 组件是一个高级特性,是 laravel 第七版加入的。 在本文中,我们将了解什么是组件,如何创建组件,如何在刀片模型中使用组件以及如何通过传递参数来参数化组件。

什么是 Laravel 组件?

组件是我们可以在任何模板刀片中重用的一段代码。 它类似于部分、布局和包含。 例如,我们为每个模板使用相同的标题,因此我们可以创建一个标题组件,我们可以重复使用它。

为了更好地理解组件的另一种用法就像您需要在网站上的许多地方使用注册按钮,例如页眉、页脚或网站上的其他任何地方。因此,创建该按钮代码的组件并重用它。

如何在 Laravel 中创建组件

例如,让我们创建一个组件 Header 与升Artisan:

php artisan make:component Header

此命令在您的 laravel 项目中创建两个文件:

  • 一个名为 Header.php 目录里面 app/http/View/Components;
  • 和一个 HTML 刀片文件,名称为 header.blade.php 目录里面 resources/views/components/.

也可以在子目录下创建组件,例如:

php artisan make:component Forms/Button

此命令将在目录中创建一个按钮组件 App\View\Components\Forms 刀片文件将放在 resources/views/components/forms 目录中。

为了在 HTML 刀片文件中呈现组件,我们将使用以下语法:

Laravel 组件示例

首先我们在文件中插入一些 HTML 代码 header.blade.php 的组件。

<div><h1> Header Component </h1></div>

现在创建一个视图文件 users.blade.php 在资产文件夹中,我们可以在其中使用标头组件。

创新通讯
不要错过有关创新的最重要新闻。 注册以通过电子邮件接收它们。
<x-header /><h1>User Page</h1>

现在,通过系统 路由 laravel的,我们调用blade在浏览器中显示结果

如何将数据传递给 Laravel 组件

将数据传递给组件 Blade 使用以下语法,指定与元素内参数相关的值 HTML:

<x-header message=”Utenti” />

例如,我们在 users.blade.php 文件中使用了前面的组件。

你应该 defi完成 header.php 文件中的组件数据。 所有公共变量数据都自动可用于组件视图。

在文件中添加代码 app/http/View/Components/ 目录中的 header.php .

<?php

namespace App\View\Components;
use Illuminate\View\Component;

   class Header extends Component{

   /*** The alert type.** @var string*/

   public $title = "";

   public function __construct($message){

   $this->title = $message;

   }
}

可以看到,类的构造函数方法设置变量 $title 将参数值传递给组件。 现在添加变量 $title 在组件文件中 header.blade.php 显示过去的数据。

<div> <h1> {{$title}}'s Header Component </h1> </div>

现在这个传输的组件数据将显示在浏览器中。

同样,您可以通过创建另一个可视化文件在具有不同数据的另一个可视化页面上使用此组件 blade contact.blade.php 并添加以下组件代码以显示传递的数据。

<x-header message=”Contact Us” />

在组件中,有时需要指定额外的 HTML 属性,比如 CSS 类名,可以直接添加。

<x-header class=”styleDiv” />

Ercole Palmeri

创新通讯
不要错过有关创新的最重要新闻。 注册以通过电子邮件接收它们。

Articoli最新回应

卡塔尼亚综合诊所的 Apple 观众对增强现实进行创新干预

卡塔尼亚综合诊所使用 Apple Vision Pro 商业查看器进行了眼部整形手术……

3 2024五月

儿童涂色页的好处 - 适合所有年龄段的魔法世界

通过着色培养精细运动技能可以帮助孩子们为写作等更复杂的技能做好准备。填色…

2 2024五月

未来已来:航运业如何彻底改变全球经济

海军部门是真正的全球经济力量,已迈向 150 亿美元的市场……

1 2024五月

出版商和 OpenAI 签署协议以规范人工智能处理的信息流

上周一,英国《金融时报》宣布与 OpenAI 达成协议。英国《金融时报》授予其世界级新闻报道许可……

四月30 2024