渲染组件

未匹配的标注

渲染组件

Livewire blade 指令 (@livewire)

在页面上渲染 Livewire 组件的最基本方法是使用 blade 指令 @ livewire

<div>
    @livewire('search-posts')
</div>

如果您使用的是Laravel 7或更高版本,则可以使用标记语法。

<livewire:search-posts />

如果您的组件放在子文件夹中,具有自己命名空间,则必须使用一个以命名空间为前缀的点(.)。

例如,您在 app/Http/Livewire/Nav 下有一个 SearchPosts 组件,则需要如下方式使用:

namespace App\Http\Livewire\Nav;

use Livewire\Component;

class SearchPosts extends Component
{
    // ...
}
<livewire:nav.search-posts />

传递参数

您可以通过将其他参数传递给 @livewire 指令来将数据传递给组件。 例如,假设我们有一个ShowContact Livewire组件,需要知道要显示哪个联系人。 这是您可以像这样传递 contact 模型。

@livewire('show-contact', ['contact' => $contact])

如果您使用的是Laravel 7或更高版本,则可以使用标记语法。

<livewire:show-contact :contact="$contact">

现在,您可以在组件中获取这些参数,并使用 mount() 生命周期挂钩将数据存储为公共属性。

在 Livewire 组件中, 您应使用 mount() 替代 __construct()

use Livewire\Component;

class ShowContact extends Component
{
    public $name;
    public $email;

    public function mount($contact)
    {
        $this->name = $contact->name;
        $this->email = $contact->email;
    }

    ...
}

依赖注入

类似控制器, 您可以新增类型声明参数来进行依赖注入。

use Livewire\Component;
use \Illuminate\Session\SessionManager

class ShowContact extends Component
{
    public $name;
    public $email;

    public function mount(SessionManager $session, $contact)
    {
        $session->put("contact.{$contact->id}.last_viewed", now());

        $this->name = $contact->name;
        $this->email = $contact->email;
    }

    ...
}

Accessing The Request

由于 mount() 在页面初始化期间运行,所以这里是访问 Laravel 的request 对象最合适的地方。

例如, 您可以根据请求参数设置合适的初始值:

use Livewire\Component;
use \Illuminate\Session\SessionManager

class ShowContact extends Component
{
    public $name;
    public $email;

    public function mount($contact, $sectionHeading = '')
    {
        $this->name = $contact->name;
        $this->email = $contact->email;
        $this->sectionHeading = request('section_heading', $sectionHeading);
    }

    ...
}

Livewire 路由注册

如果您编写的控制器和视图仅返回 Livewire 组件,则可能要使用 Livewire的路由助手函数来去掉多余的代码。 看下面的例子:

原来的写法

// Route
Route::get('/home', 'HomeController@show');

// Controller
class HomeController extends Controller
{
    public function show()
    {
        return view('home');
    }
}

// View
@extends('layouts.app')

@section('content')
    @livewire('counter')
@endsection

使用助手函数的写法

// Route
Route::livewire('/home', 'counter');

注意: 注意:为了使此功能正常工作,Livewire 假定您在 resources/views/layouts/app.blade.php 中创建了一个布局,该布局会产生一个添加 content 区块(@yield('content'))

自定义布局

如果您使用的不同的布局文件或者其他区块名,您可以在 laravel 的路由定义时自定义配置:

// 自定义 layout
Route::livewire('/home', 'counter')
    ->layout('layouts.base');

// 自定义区块 (@yield('body'))
Route::livewire('/home', 'counter')
    ->section('body');

// 传递参数到布局文件 (Like native @extends('layouts.app', ['title' => 'foo']))
Route::livewire('/home', 'counter')
    ->layout('layouts.app', [
        'title' => 'foo'
    ]);

您还可以使用路由组的数组语法为整个路由组配置以下设置:

Route::group(['layout' => 'layouts.base', 'section' => 'body'], function () {
    //
});

也可以链式调用:

Route::layout('layouts.base')->section('body')->group(function () {
    //
});

路由参数

您可能经常在控制器里访问路由参数,由于不再使用控制器,所以Livewire 尝试通过其 mount 生命周期钩子来模仿这种行为。 例如:

web.php

Route::livewire('/contact/{id}', 'show-contact');

App\Http\Livewire\ShowContact.php

use Livewire\Component;

class ShowContact extends Component
{
    public $name;
    public $email;

    public function mount($id)
    {
        $contact = User::find($id);

        $this->name = $contact->name;
        $this->email = $contact->email;
    }

    ...
}

正如您所看到的,就其参数而言,Livewire 组件中的 mount 方法的行为就像控制器方法一样。 如果您访问 /contact/123,$ id变量将传递给mount 方法。

路由模型绑定

就像您期望的那样,Livewire 组件实现了您在控制器中惯用的所有功能,包括路由模型绑定。 例如:

web.php

Route::livewire('/contact/{user}', 'show-contact');

App\Http\Livewire\ShowContact.php

use Livewire\Component;

class ShowContact extends Component
{
    public $contact;

    public function mount(User $user)
    {
        $this->contact = $user;
    }
}

现在访问 /contact/123, ID 123 对应的 User 模型将传递给 mount 方法。

Render 方法

在初始页面加载和每个后续组件更新时,将调用 Livewire 组件的 render 方法。

在简单的组件中,您不需要自己定义 render 方法。 Livewire 组件基类包含一个动态的 render 方法。

返回 Blade 视图

render() 方法需要返回一个 Blade 视图,因此, 您可以将其与编写控制器方法进行比较。 这是一个例子:

确保您的 Blade 视图只有一个根元素。

ShowPosts.php

use Livewire\Component;

class ShowPosts extends Component
{
    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => Post::all(),
        ]);
    }
}

show-posts.blade.php

<div>
    @foreach ($posts as $post)
        @include('includes.post', $post)
    @endforeach
</div>

返回模板字符串

如果您对项目使用 Laravel 7 或更高的版本, 您甚至可以在 ->render() 方法中随意返回一个 Blade 模板字符串。

DeletePost.php

use Livewire\Component;

class DeletePost extends Component
{
    public $post;

    public function mount(Post $post)
    {
        $this->post = $post;
    }

    public function delete()
    {
        $this->post->delete();
    }

    public function render()
    {
        return <<<'blade'
            <div>
                <button wire:click="delete">Delete Post</button>
            </div>
        blade;
    }
}

对于上述内联组件,您应该在创建过程中使用 --inline 标志:artisan make:livewire delete-post --inline

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~