渲染组件

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