专栏首页LaravelCodeLaravel 7 新特性-组件以及插槽的简单用法

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

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 新特性-组件以及插槽的简单用法

联系我

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Laravel 项目中编写 Vue 组件

    新安装的 Laravel 应用在 resources/js/components 目录默认包含一个 ExampleComponent.vue Vue 组件。 ...

    hedeqiang
  • Laravel 使用 laravel-s 引发登陆状态问题(所有终端都登陆)

    说下这次血的教训吧? 熟悉我的人,可能知道我的这个小站 是由 Laravel 建立的,目前我的版本变更为 Laravel 6.x 了,然后今天我发现所有客户端,...

    hedeqiang
  • VueCLI 项目如何使用 Tailwind CSS

    新建 tailwind.css,在 src/assets 新建 css 文件夹,并新建 tailwind.css

    hedeqiang
  • React Native 学习资源精选仓库

    React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

    CrazyCodeBoy
  • Vue插槽slot

    使用了那么久的vue,到现在才知道vue自带的组件插槽slot,说真的,插槽的作用在一些场景下非常有用。

    wade
  • Nginx反向代理与缓存应用

    小柒吃地瓜
  • Hadoop离线数据分析平台实战——360地域信息分析Hadoop离线数据分析平台实战——360地域信息分析

    Hadoop离线数据分析平台实战——360地域信息分析 项目进度 模块名称 完成情况 用户基本信息分析(MR)� 完成 浏览器信息分析(MR)...

    Albert陈凯
  • VS Code的7个开源替代品,全都知道算我输!

    开源最前线(ID:OpenSourceTop) 猿妹编译项目地址:https://opensource.com/article/20/6/open-source...

    abs_zero
  • 小程序开发实战(8):可与其他组件绑定的文本组件(label)

    可能有很多读者认为label和text差不多,都是用来显示文本的。其实label和text一点都不像,label本身也不能显示任何文本,该组件只是与其他组件进行...

    蒙娜丽宁
  • OpenCV - 计算相机和视频的帧速率FPS

    OpenCV 库中的 VideoCapture 类主要处理视频读取以及从连接的相机中获取图像帧.

    AIHGF

扫码关注云+社区

领取腾讯云代金券