Livewire ​

简介 ​

Laravel Livewire 是一个库，它使用 Laravel Blade 作为模板语言，可以轻松构建现代、响应式、动态界面。如果你想构建一个动态且响应式的应用程序，这是一个很好的选择，也是 Vue.js 等完整 JavaScript 框架的绝佳替代品。

使用 Livewire 时，应用程序的路由将响应典型的 Blade 模板。但是，在这些模板中，你可以根据需要呈现 Livewire 组件

<div class="mt-4">
    @livewire('server-list')
</div>

使用 Livewire 堆栈时，Jetstream 有一些你应该了解的独特功能。我们将在下面讨论这些功能的每一个。

组件 ​

当我们创建 Jetstream Livewire 堆栈时，创建了各种 Blade 组件（按钮、面板、输入、模态框）以帮助创建 UI 一致性和易用性。你可以自由使用或不使用这些组件。所有这些组件都位于应用程序的 resources/views/components 目录中。

你可以通过查看应用程序的 resources/views 目录中 Jetstream 现有视图中的用法来深入了解如何使用这些组件。

模态框 ​

Jetstream Livewire 堆栈的大多数组件与后端没有通信。但是，Jetstream 中包含的 Livewire 模态框组件确实与 Livewire 后端交互以确定其打开/关闭状态。

此外，Jetstream 包含两种类型的模态框：dialog-modal 和 confirmation-modal。confirmation-modal 可用于确认破坏性操作（例如删除），而 dialog-modal 是一个更通用的模态窗口，可以在任何时候使用。

为了说明模态框的使用，请考虑以下模态框，它确认用户想要删除其帐户

<x-confirmation-modal wire:model="confirmingUserDeletion">
    <x-slot name="title">
        Delete Account
    </x-slot>

    <x-slot name="content">
        Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted.
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
            Nevermind
        </x-secondary-button>

        <x-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
            Delete Account
        </x-danger-button>
    </x-slot>
</x-confirmation-modal>

如你所见，模态框的打开/关闭状态由组件上声明的 wire:model 属性确定。该属性的名称应对应于 Livewire 组件的相应 PHP 类的布尔属性。通常，当用户单击应用程序中应该打开模态框的 UI 元素时，你会将此属性设置为 true。当然，当你准备关闭模态框时，应将该属性设置为 false。

可以通过填充三个 Blade 组件插槽来指定模态框的内容：title、content 和 footer。

横幅警报 ​

Jetstream 的 Livewire 堆栈包含一个 InteractsWithBanner 特征，旨在简化向用户显示横幅消息的过程。

InteractsWithBanner 特征提供方法，可借助 resources/views/components/banner.blade.php 组件和 Livewire 事件系统 快速显示 success 或 danger 消息。

用法 ​

首先，在您的 Livewire 组件中包含 InteractsWithBanner 特征

use Laravel\Jetstream\InteractsWithBanner;

class ExampleComponent extends Component
{
    use InteractsWithBanner;
    
    // ...
}

要在用户面前显示消息，请在 Livewire 组件方法中调用 banner、warningBanner 或 dangerBanner 方法

$this->banner('Invoice paid.');
$this->warningBanner('Payment pending approval.');
$this->dangerBanner('Payment failed.');