快速入门

您是视觉学习者吗？
通过我们深入的屏幕录制掌握 Livewire
立即观看

为了开始您的 Livewire 之旅，我们将创建一个简单的“计数器”组件并在浏览器中呈现它。此示例是初次体验 Livewire 的绝佳方式，因为它以最简单的方式展示了 Livewire 的“实时性”。

先决条件

在开始之前，请确保您已安装以下内容

  • Laravel 版本 10 或更高版本
  • PHP 版本 8.1 或更高版本

安装 Livewire

从 Laravel 应用程序的根目录运行以下 Composer 命令

composer require livewire/livewire
确保 Alpine 尚未安装

如果您正在使用的应用程序已经安装了 AlpineJS，则需要将其删除才能使 Livewire 正常工作；否则，Alpine 将被加载两次，Livewire 将无法运行。例如，如果您安装了 Laravel Breeze“Blade with Alpine”入门工具包，则需要从 resources/js/app.js 中删除 Alpine。

创建 Livewire 组件

Livewire 提供了一个便捷的 Artisan 命令来快速生成新组件。运行以下命令以生成新的 Counter 组件

php artisan make:livewire counter

此命令将在您的项目中生成两个新文件

  • app/Livewire/Counter.php
  • resources/views/livewire/counter.blade.php

编写类

打开 app/Livewire/Counter.php 并用以下内容替换其内容

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 1;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function decrement()
    {
        $this->count--;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

以下是上述代码的简要说明

  • public $count = 1; — 声明一个名为 $count 的公共属性，其初始值为 1。
  • public function increment() — 声明一个名为 increment() 的公共方法，该方法每次调用时都会增加 $count 属性。此类公共方法可以通过多种方式从浏览器触发，包括当用户单击按钮时。
  • public function render() — 声明一个 render() 方法，该方法返回一个 Blade 视图。此 Blade 视图将包含我们组件的 HTML 模板。

编写视图

打开 resources/views/livewire/counter.blade.php 文件并用以下内容替换其内容

<div>
    <h1>{{ $count }}</h1>
 
    <button wire:click="increment">+</button>
 
    <button wire:click="decrement">-</button>
</div>

此代码将显示 $count 属性的值以及两个按钮，分别增加和减少 $count 属性。

Livewire 组件必须具有一个根元素

为了使 Livewire 正常工作，组件必须只有一个元素作为其根元素。如果检测到多个根元素，则会引发异常。建议使用 <div> 元素，如示例所示。HTML 注释被视为单独的元素，应放在根元素内。呈现全页组件时，布局文件的命名插槽可以放在根元素之外。这些将在组件呈现之前被移除。

为组件注册路由

在 Laravel 应用程序中打开 routes/web.php 文件并添加以下代码

use App\Livewire\Counter;
 
Route::get('/counter', Counter::class);

现在，我们的 counter 组件被分配给 /counter 路由，这样当用户访问应用程序中的 /counter 端点时，浏览器将呈现此组件。

创建模板布局

在浏览器中访问 /counter 之前，我们需要一个 HTML 布局，以便在其中渲染我们的组件。默认情况下，Livewire 将自动查找名为 resources/views/components/layouts/app.blade.php 的布局文件

如果该文件不存在，你可以通过运行以下命令创建它

php artisan livewire:layout

此命令将生成一个名为 resources/views/components/layouts/app.blade.php 的文件，其内容如下

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

counter 组件将渲染在上面模板中的 $slot 变量的位置。

你可能已经注意到 Livewire 没有提供任何 JavaScript 或 CSS 资产。这是因为 Livewire 3 及更高版本会自动注入它需要的任何前端资产。

测试它

我们的组件类和模板就绪后，我们的组件就可以测试了！

在浏览器中访问 /counter，你应该会看到屏幕上显示一个数字，以及两个用于增加和减少数字的按钮。

点击其中一个按钮后，你会注意到计数实时更新，而无需重新加载页面。这就是 Livewire 的魔力：完全用 PHP 编写的动态前端应用程序。

我们只是粗略地了解了 Livewire 的功能。继续阅读文档以了解 Livewire 提供的所有功能。