Laravel 7 很重要一个更新就是 Blade 组件标签 & 优化
其实组件 和 布局 layout 有点儿类似，我们可以抽离相同的代码块，封装成一个组件。以前我们是封装成多个 layout 来进行布局。这个功能和 Vue 极度类似，很大程度上借鉴了 Vue.js。
ok,废话不多说，我们就来看看组件如何使用。
使用组件
Laravel 7 的版本，新增了一个创建组件的命令，make:component。
我们试着生成一个 Header 组件。
代码语言：javascript复制php artisan make:component Header运行以上命令，将会生成两个文件，一个是：app/View/Components/Header.php，另一个是：resources/views/components/header.blade。
我们先编写组件，编辑 resources/views/components/header.blade 。
<div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>然后组件怎么引入呢？其实就像写标签，HTML 标签一样即可。Laravel 7 里组件的引入都是 以 x- 来进行引入
为了简化方便，我将在 welcome.blade.php 模板里来引入。我将去掉无用的代码，改成精简的 HTML。 要想使用组件 只需要 <x-header></x-header> 即可
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<x-header></x-header>
</body>
</html>其实我们也可以在进行简化 采用如下的方式也是同样的道理
代码语言：javascript复制<x-header />是不是非常方便？我们以后在进行布局的时候，时不时可以直接采用组件的方式呢。
组件传参
字符串传参
熟悉 Vue 的童鞋，知道我们组件是可以进行传参的，那么在 Laravel 7 里可不可以呢？
答案是当然可以。
接下来我们来看下 另一个文件 app/View/Components/Header.php。
<?php
namespace AppViewComponents;
use IlluminateViewComponent;
class Header extends Component
{
/**
* Create a new component instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*
* @return IlluminateViewView|string
*/
public function render()
{
return view('components.header');
}
}假如我们传入一个 title 的字段,只需要修改 __construct 构造函数即可
public $title;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($title)
{
$this->title = $title;
}之后修改组件传参
代码语言：javascript复制<x-header title="Laravel 7"></x-header>接着，我们如果在组件中显示传入的值，直接使用 双大括号即可。
代码语言：javascript复制<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">{{ $title }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>以上传递是一个简单的字符串。那么如果传递一个变量呢？
变量传参
变量传参的方式就不可以采用上方的属性传参了。不可以采用如下的方式
代码语言：javascript复制@php
$title = 'Hello Laravel 7';
@endphp
<x-header title="{{ $title }}"></x-header>如果采用以上方式将会输出如下：并不能达到我们想要的效果
代码语言：javascript复制<?php echo e($title); ?>那么该怎样使用呢？其实类似于 Vue 一样 采用 : 的方式，然后也不能使用 双大括号了，直接字符串包含变量即可
<x-header :title="$title"></x-header>组件还有一个强大的用法，那就是可以在组件视图中执行组件类上的任何公共方法
假如 app/View/Components/Header.php 文件有一个 返回数据的方法。
public function menus()
{
return [
'Laravel','Vue','Java'
];
}那么直接就可以在组件中使用
代码语言：javascript复制<ul class="nav">
@foreach($menus as $menu)
<li class="nav-item">
<a class="nav-link active" href="#">{{ $menu }}</a>
</li>
@endforeach
</ul>方法也可以传递参数，这里我就不演示了。可以参考文档 Blade 模板
插槽
同理，他和 Vue 也类似，插槽意思就是我们可以在组件内添加一些其他内容。 比如：
代码语言：javascript复制@php
$title = 'Hello Laravel 7';
@endphp
<x-header :title="$title">
<div><strong>Whoops!</strong> Something went wrong!</div>
</x-header>那如果要显示添加的内容，我们组件这里需要添加一个 {{ $slot }} 即可。
组件中的代码如下：
代码语言：javascript复制<ul class="nav">
@foreach($menus as $menu)
<li class="nav-item">
<a class="nav-link active" href="#">{{ $menu }}</a>
</li>
@endforeach
</ul>
{{ $slot }}插槽也是可以进行传参的。
代码语言：javascript复制<x-slot name="error">
Server Error
</x-slot>然后在组件使用 $error 即可接受传递的内容
{{ $error }}ok,以上就是 关于 Laravel 7 组件的一些新特性，当然其中还有一些用法，我没有说明，你可以参考 官方文档 来进一步使用
版权许可
本作品采用 知识共享署名 4.0 国际许可协议 进行许可。转载无需与我联系，但须注明出处，注明文章来源 Laravel 7 新特性-组件以及插槽的简单用法
联系我
