Laravel如何使用Livewire构建动态组件？（入门代码）

Livewire 可用 PHP 和 Blade 构建动态组件，无需 JavaScript；通过 public 属性双向绑定、wire:click 触发方法、wire:model.live 实现实时交互，自动处理 AJAX 与 DOM 更新。

用 Livewire 在 Laravel 中构建动态组件，不需要写一行 JavaScript，只要 PHP 和 Blade 就能实现响应式交互。核心是把组件逻辑写在 PHP 类里，视图用 Blade 渲染，Livewire 自动处理 AJAX 请求和 DOM 更新。

1. 安装与基础配置

确保已安装 Laravel（建议 9.x 或更高），然后执行：

composer require livewire/livewire

在 resources/views/layouts/app.blade.php 的 末尾添加：

@livewireStyles

在 前添加：

@livewireScripts

2. 创建一个计数器组件（入门示例）

运行命令生成组件：

php artisan make:livewire Counter

会生成两个文件：
- app/Livewire/Counter.php（组件类）
- resources/views/livewire/counter.blade.php（模板）

修改 Counter.php：

namespace App\Livewire;
use Livewire\Component;

							

								
								

									uBrand
									
一站式AI品牌创建平台，在线品牌设计，AI品牌策划，智能品牌营销；uBrand帮助创业者轻松打造个性品牌！
								
								下载 
							
						
class Counter extends Component
{
public $count = 0;
public function increment()
{
    $this->count++;
}

public function render()
{
    return view('livewire.counter');
}
}
修改 counter.blade.php：

    
当前计数：{{ $count }}
    +1
在任意 Blade 页面中使用：
@livewire('counter')
3. 关键语法说明


wire:click：绑定点击事件，触发对应 PHP 方法

public 属性：自动双向绑定，修改后页面实时更新

render() 方法：返回视图，类似控制器的返回逻辑

无需路由注册：Livewire 内部通过 /livewire/message/{name} 处理请求

4. 小技巧：表单与实时搜索
比如加个搜索框，输入时实时过滤数据：
public $search = '';
public function render()
{
$users = User::where('name', 'like', "%{$this->search}%")->get();
return view('livewire.user-search', compact('users'));
}
模板中：


wire:model.live：输入时立即触发更新（默认是失焦才更新）
支持 .debounce.500ms 防抖，如 wire:model.live.debounce.300ms

所有 public 属性都会被 Livewire 管理，无需手动序列化

基本上就这些。不复杂但容易忽略细节：确保组件名小写中划线（如 user-profile），PHP 类名驼峰（UserProfile），Blade 文件路径要匹配。写完刷新页面，交互就生效了。