Laravel学习笔记基础系列--(十三)Laravel模板布局

作者: 温新

分类: 【Laravel】

阅读: 1777

时间: 2021-07-11 13:34:11

作者：温新

时间：2021-06-27

hi，我是温新，一名PHPer。

如果没有使用模板布局会是什么样的情况？若一个项目需要添加一个新的样式文件，如果没有模板布局，那么使用到该样式的第一个文件都是新加这个样式文件。

如果使用了模板布局，则需要改动一个文件即可。另一个常见的就是，分离公共区域，如头部，底部等，结构都是一样的。

模板文件需要使用的文件比较多，因此下载一个全新的项目进行演示。

模板继承

第一步：定义模板布局

文件位置：resources/views/layouts/layout.blade.php

用法：@yield('content',默认值)

layout.blade.php为整体结构页面，其他相同结构的页面就需要继承该页面。

// layout.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>自如初-@yield('title')</title>
	@section('cssAndJs')
	@show
</head>
<body>
	@section('header')
        头部
    @show

    <div class="container">
        @yield('content')
    </div>

   @section('js')@show
</body>
</html>

第二步：定义路由

// web.php
Route::get('demo', 'DemoController@index');
Route::get('demo/test', 'DemoController@test');

第三步：定义控制器与方法

php artisan make:controller DemoController

// DemoController.php
public function index()
{
    return view('demo.index');
}

public function test()
{
    return view('demo.test');
}

第四步：创建视图文件并继承布局文件

文件:demo/index.blade.php

@extends('layouts.layout')
@section('title', '模板布局测试标题')

@section('cssAndJs')
    @parent
    <link rel="stylesheet" href="app/test.css">
@endsection

@section('header')
    <p>Laravel学习笔记系列-自如初</p>
@endsection

@section('content')
    <p>主体内容</p>
@endsection

文件：demo/test.blade.php

@extends('layouts.layout')
@section('title', 'test视图模板文件')

@section('header')
    <p>Laravel学习笔记系列-自如初-test视图文件</p>
@endsection

@section('content')
    <p>我是test视图文件</p>
@endsection

如此，一个简单的布局继承就完成了。

1）@parent会显示布局模板中该区块的内容，若不使用@parent则会覆盖layout文件中对应区块的内容。
2）布局模板中使用@section()@show来定义区块内容，子模板继承需要使用@section()@endsection
3）布局模板中使用@yield()来站位，子模板中使用@section()来填充内容

组件与插槽

简单的理解，就是实现代码复用。

组件

组件的快速使用

第一步：创建组件

命令：make:conponent

php artisan make:component Alert

该命令会在App\View\Components目录下生成Alert组件类，还会在resources/views/components目录生成对应的视图文件。

第二步：编写组件内容

文件：resources/views/components/alert.blade.php

<div>
    <p>我是一个组件 alert</p>
</div>

第三步：视图文件中使用组件

这里，由于这个不需要全局使用，按需使用，因此就在demo/index.blade.php视图文件中使用了。

用法：x-组件名

注意：使用组件必须以x-开头+组件名的形式；若包含目录，则以x-+.目录名+.组件名

// index.blade.php
// 为了节约篇幅，省略其他内容
@section('header')
    <x-alert/>
@endsection

【扩展了解】组件的另一种使用方式

@component('components.alert')
    <strong>Whoops!</strong> Something went wrong!
@endcomponent

组件间的数据使用

没有数据的组件是没有灵魂的，下面开始在组件中使用数据。基于组件的快速使用，我们来改造结构。

第一步：改造控制器index方法

// DemoController.php
return view('demo.index')->with('msg','动态数据');

第二步：修改Alert组件类

文件位置：app/View/Components/Alert.php

// 定义公共属性用于接收数据
public $type;
public $message;

public function __construct($type, $message)
{
    $this->type = $type;
    $this->message = $message;
}

第三步：组件中传递数据

文件位置：demo/index.blade.php

@section('header')
	<x-alert type="error" :message="$msg"/>
@endsection

【扩展了解】另一种组件使用数据

@component('components.alert',['type'=>'succ','message'=>'3333333333'])
@endcomponent

下面对第二步进行说明。

视图文件中使用了组件且传递了值，那么在组件类文件Alert.php中要定义属性来接收数据。定义为public属性，则数据会在对应的组件视图（alert.php)中生效。因此，该案例中定义了2个public属性来接收数据。

插槽

两种方式快速使用插槽

方式一

关于插槽，可以在视图目录中的任意目录。为了方便，我这里仍旧使用组件命令来创建插槽文件，当然了，你也可以手动创建插槽文件。

第一步：创建插槽文件并编辑插槽文件

创建插槽文件

php artisan make:component Alert2

编辑生成的插槽文件

// resources/views/components/alerts.blade.php
<div>{{ $slot }}</div>

第二步：使用组件。使用组件的形式将内容传递到插槽

// demo/test.blade.php
@section('content')
    <x-alert2>
        <h3>我在组件中使用了插槽</h3>
    </x-alert2>
@endsection

方式二

第一步：手动创建插槽文件

文件：layouts/slo.blade.php

第二步：编辑插槽文件

<div>
    {{ $slot }}
</div>

第三步：视图中使用插槽文件

文件：demo/test.blade.php

@component('layouts.slo')
    <h3>我是手动创建的插槽</h3>
@endcomponent

插槽命名

基于方式一演示

用法：<x-slot name='slot名'></x-slot>

第一步：为插槽起个名

位置：demo/test.blade.php

@section('content')
    <x-alert2>
        <h3>我在组件中使用了插槽</h3>
        <x-slot name="title">
            这里使用了为该组件起名
        </x-slot>
    </x-alert2>
@endsection

命令组件的使用必须是x-slot name='slot名'

此案例中，使用x-alert为插槽注入了内容，且使用x-slot为插槽起了个名字title并注入内容，该内容注入到插槽模板中的$title

第二步：编辑插槽组件内容

文件位置：views/components/alert2.blade.php

<div>
    {{ $slot }}
    <p>{{$title}}</p>
</div>

基于方式二的演示

用法：@component('目录.插槽文件')@endponent

第一步：视图中为插槽起个名

文件位置：test.blade.php

@section('content')
    @component('layouts.slo')
        <h3>我是手动创建的插槽</h3>
        @slot('title')
            <h3>我是使用component方式</h3>
        @endslot
    @endcomponent
@endsection

第二步：修改插槽

文件位置：layouts/slo.blade.php

<div>
    {{ $slot }}
    <p>{{ $title1 }}</p>
</div>

我是温新

每天进步一点点，就一点点

请登录后再评论