Livewire

• 介绍
• 组件
• 模态框

介绍

Laravel Livewire 是一个库，它可以让你使用 Laravel Blade 作为你的模板语言，简单地构建现代的、响应式的、动态的界面。如果你想要构建一个动态和响应式的应用程序，并且不想使用像 Vue.js 这样的完整 JavaScript 框架，那么 Livewire 是一个很好的选择。

当使用 Livewire 时，你应用程序的路由将使用 Blade 模板进行返回。但是，在这些模板中，你可以根据需要渲染 Livewire 组件：

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

当使用 Livewire 技术栈时，Jetstream 有一些特有的功能，你应该了解。我们将在下面逐一讨论这些功能。

提示：Livewire 文档
在使用 Livewire 技术栈之前，强烈建议你阅读整个 Livewire documentation

组件

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

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

模态框

Jetstream Livewire 中的大多数组件与后端没有通信。但是，Jetstream 中包含的 Livewire 模态框组件需要与你的 Livewire 后端交互才能确定它们的打开/关闭状态。

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

为了说明模态框的使用，我们来看下面模态框的例子，它用于确认用户是否想要删除他们的账户：

<x-confirmation-modal wire:model="confirmingUserDeletion">
    <x-slot name="title">
        删除账户
    </x-slot>

    <x-slot name="content">
        你确定要删除你的账户吗？一旦你的账户被删除，所有的资料和数据都将被永久删除。
    </x-slot>

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

        <x-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
            删除账户
        </x-danger-button>
    </x-slot>
</x-confirmation-modal>

正如你所看到的，模态的打开/关闭状态是由组件上声明的 wire:model 属性决定的。该属性的名称与 Livewire 组件对应的 PHP 类中的一个布尔属性相对应。通常，当用户点击你的应用中应该打开模态框的 UI 元素时，你将把这个属性设置为 true。当然，当你准备关闭模态框时，该属性应被设置为false。

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