Laravel 7 新特性-组件以及插槽的简单用法

作者: hedeqiang

发布时间: 2020-03-12 22:38:41

Laravel 7 很重要一个更新就是 Blade 组件标签 & 优化

其实组件 和 布局 layout 有点儿类似,我们可以抽离相同的代码块,封装成一个组件。以前我们是封装成多个 layout 来进行布局。这个功能和 Vue 极度类似,很大程度上借鉴了 Vue.js。

ok,废话不多说,我们就来看看组件如何使用。

使用组件

Laravel 7 的版本,新增了一个创建组件的命令,make:component

我们试着生成一个 Header 组件。

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>

其实我们也可以在进行简化 采用如下的方式也是同样的道理

<x-header />

是不是非常方便?我们以后在进行布局的时候,时不时可以直接采用组件的方式呢。

组件传参

字符串传参

熟悉 Vue 的童鞋,知道我们组件是可以进行传参的,那么在 Laravel 7 里可不可以呢?

答案是当然可以。

接下来我们来看下 另一个文件 app/View/Components/Header.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Header extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|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;
}

之后修改组件传参

<x-header title="Laravel 7"></x-header>

接着,我们如果在组件中显示传入的值,直接使用 双大括号即可。

<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>

以上传递是一个简单的字符串。那么如果传递一个变量呢?

变量传参

变量传参的方式就不可以采用上方的属性传参了。不可以采用如下的方式

@php
    $title = 'Hello Laravel 7';
@endphp
<x-header title="{{ $title }}"></x-header>

如果采用以上方式将会输出如下:并不能达到我们想要的效果

<?php echo e($title); ?>

那么该怎样使用呢?其实类似于 Vue 一样 采用 : 的方式,然后也不能使用 双大括号了,直接字符串包含变量即可

<x-header :title="$title"></x-header>

组件还有一个强大的用法,那就是可以在组件视图中执行组件类上的任何公共方法

假如 app/View/Components/Header.php 文件有一个 返回数据的方法。

public function menus()
{
    return [
        'Laravel','Vue','Java'
    ];
}

那么直接就可以在组件中使用

<ul class="nav">
    @foreach($menus as $menu)
        <li class="nav-item">
            <a class="nav-link active" href="#">{{ $menu }}</a>
        </li>
    @endforeach
</ul>

方法也可以传递参数,这里我就不演示了。可以参考文档 Blade 模板

插槽

同理,他和 Vue 也类似,插槽意思就是我们可以在组件内添加一些其他内容。 比如:

@php
    $title = 'Hello Laravel 7';
@endphp
<x-header :title="$title">
    <div><strong>Whoops!</strong> Something went wrong!</div>
</x-header>

那如果要显示添加的内容,我们组件这里需要添加一个 {{ $slot }} 即可。

组件中的代码如下:

<ul class="nav">
    @foreach($menus as $menu)
        <li class="nav-item">
            <a class="nav-link active" href="#">{{ $menu }}</a>
        </li>
    @endforeach
</ul>

{{ $slot }}

插槽也是可以进行传参的。


<x-slot name="error">
    Server Error
</x-slot>

然后在组件使用 $error 即可接受传递的内容

{{ $error }}

ok,以上就是 关于 Laravel 7 组件的一些新特性,当然其中还有一些用法,我没有说明,你可以参考 官方文档 来进一步使用

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系,但须注明出处,注明文章来源 Laravel 7 新特性-组件以及插槽的简单用法

联系我

编程怪事