Livewire

未匹配的标注

使用 Livewire

Livewire 组件

Laravel Modules 没有 make-livewire 命令。您可以手动编写Livewire类和视图。

为了使用Livewire组件,您需要在模块服务提供者中注册它们,在boot方法中定义Livewire组件及其路径。

component() 需要2个参数:

1) blade 视图的路径以模块名称为前缀
2) Livewire 类的路径

Livewire::component('contacts::add', Add::class);

要在 blade 视图中渲染 Livewire 组件:

<livewire:contacts::add />

对于多单词的类名,使用连字符,例如一个名为 ContactForm 的 Livewir e组件:

Livewire::component('contacts::contact-form', ContactForm::class);

然后在视图中渲染它:

<livewire:contacts::contact-form />

Livewire模块包

尽管这可以工作,但如果您可以为模块生成 livewire 组件,那将是更好的选择。好消息是,Mehediul Hassan Miton 提供了一个名为 laravel-modules-livewire 的软件包。[https://github.com/mhmiton/laravel-modules-livewire] (github.com/mhmiton/laravel-modules...)

此软件包自动注册livewire组件,您不再需要在服务提供者中注册所有livewire组件。

更好的是,你可以使用 make-livewire 命令生成新的 Livewire 组件。

安装

通过composer安装:

composer require mhmiton/laravel-modules-livewire

配置

发布包的配置文件:

php artisan vendor:publish --provider="Mhmiton\LaravelModulesLivewire\LaravelModulesLivewireServiceProvider"

创建组件

命令签名:

php artisan module:make-livewire <Component> <Module> --view= --force --inline --custom

示例:

php artisan module:make-livewire Pages/AboutPage Core
php artisan module:make-livewire Pages\\AboutPage Core
php artisan module:make-livewire pages.about-page Core

如果类已经存在,则强制创建组件:

php artisan module:make-livewire Pages/AboutPage Core --force

输出:

COMPONENT CREATED

CLASS: Modules/Core/Http/Livewire/Pages/AboutPage.php
VIEW:  Modules/Core/Resources/views/livewire/pages/about-page.blade.php
TAG: <livewire:core::pages.about-page />

内嵌组件:

php artisan module:make-livewire Core Pages/AboutPage --inline

输出:

COMPONENT CREATED

CLASS: Modules/Core/Http/Livewire/Pages/AboutPage.php
TAG: <livewire:core::pages.about-page />

额外的选项 (–view):

你可以使用(–view)选项为component设置自定义视图路径。

示例:

php artisan module:make-livewire Pages/AboutPage Core --view=pages/about
php artisan module:make-livewire Pages/AboutPage Core --view=pages.about

输出:

COMPONENT CREATED

CLASS: Modules/Core/Http/Livewire/Pages/AboutPage.php
VIEW:  Modules/Core/Resources/views/livewire/pages/about.blade.php
TAG: <livewire:core::pages.about-page />

注册组件

<livewire:{module-lower-name}::component-class-kebab-case />

示例:

<livewire:core::pages.about-page />

自定义模块

要为自定义模块创建组件,请在配置文件中添加自定义模块。

发布配置文件后,配置文件位于 config/modules-livewire.php

删除这些行的注释并添加自定义模块。

    /*
    |--------------------------------------------------------------------------
    | 自定义模块设置
    |--------------------------------------------------------------------------
    |
    */

    // 'custom_modules' => [
    //     'Chat' => [
    //         'path' => base_path('libraries/Chat'),
    //         'module_namespace' => 'Libraries\\Chat',
    //         // 'namespace' => 'Http\\Livewire',
    //         // 'view' => 'Resources/views/livewire',
    //         // 'name_lower' => 'chat',
    //     ],
    // ],

自定义模块配置细节

path: 添加模块全路径(必需)

module_namespace: 添加模块命名空间(必需)

namespace: 默认情况下使用 config('modules-livewire.namespace') 值。您可以为特定的模块设置不同的值

view: 默认情况下使用 config('modules-livewire.view') 值。您可以为特定的模块设置不同的值

name_lower: 默认使用小写的模块名。如果你设置了自定义名称,模块组件将以自定义名称注册。

Livewire全页组件

使用Livewire,您可以将组件渲染为完整的页面,而不是使用控制器,您将只使用Livewire类。让我们看看如何设置一个完整的页面组件。

在 contacts 模块中创建一个名为 Feedback 的 Livewire 组件。

php artisan module:make-livewire Feedback Contacts

这将输出:

 COMPONENT CREATED

CLASS: Modules/Contacts/Http/Livewire/Feedback.php
VIEW:  Modules/Contacts/Resources/views/livewire/feedback.blade.php
TAG: <livewire:contacts::feedback />

现在设置路由,打开模块 web.php 文件

<?php

use Modules\Contacts\Http\Livewire\Feedback;

Route::middleware(['web', 'auth'])->prefix('app/contacts')->group(function() {
    Route::get('feedback', Feedback::class)->name('app.contacts.feedback');
});

app/contacts/feedback 创建一个路由。直接路由到 Feedback::class,我们不指定方法,只指定类。

Livewire类是一个标准的Livewire类:

<?php

namespace Modules\Contacts\Http\Livewire;

use Livewire\Component;

class Feedback extends Component
{
    public function render()
    {
        return view('contacts::livewire.feedback');
    }
}

视图 feedback.blade.php:

<div>
    <h3>The <code>Feedback</code> livewire component is loaded from the  <code>Contacts</code> module.</h3>
</div>

在这一点上,它与嵌入式Livewire组件没有多大区别,只是您不必在直接渲染时将组件渲染到父视图文件中。

默认情况下,Livewire将使用来自 layouts/app 的布局,如果你想使用模块中的布局,可以在render方法上使用 ->layout()

public function render()
{
    return view('contacts::livewire.feedback')->layout('contacts::layouts.app');
}

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

上一篇 下一篇
Slowlyo
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~