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在 前添加：
@livewireScripts2. 创建一个计数器组件（入门示例）
运行命令生成组件：
php artisan make:livewire Counter会生成两个文件：
– app/Livewire/Counter.php（组件类）
– resources/views/livewire/counter.blade.php（模板）
修改 Counter.php：
namespace AppLivewire; <p>use LivewireComponent;</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1886"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680421223599.png" alt="独响"> </a> <div class="aritcle_card_info"> <a href="/ai/1886">独响</a> <p>一个轻笔记+角色扮演的app</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="独响"> <span>249</span> </div> </div> <a href="/ai/1886" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="独响"> </a> </div> <p>class Counter extends Component { public $count = 0;</p><pre class='brush:php;toolbar:false;'>public function increment() { $this->count++; } public function render() { return view('livewire.counter'); }}
修改 counter.blade.php：
<div> <h2>当前计数：{{ $count }}</h2> <button wire:click="increment">+1</button> </div>在任意 Blade 页面中使用：
@livewire('counter')3. 关键语法说明
- wire:click：绑定点击事件，触发对应 PHP 方法
- public 属性：自动双向绑定，修改后页面实时更新
- render() 方法：返回视图，类似控制器的返回逻辑
- 无需路由注册：Livewire 内部通过 /livewire/message/{name} 处理请求
4. 小技巧：表单与实时搜索
比如加个搜索框，输入时实时过滤数据：
public $search = ''; <p>public function render() { $users = User::where('name', 'like', "%{$this->search}%")->get(); return view('livewire.user-search', compact('users')); }模板中：
<input wire:model.live="search" placeholder="搜索用户...">- wire:model.live：输入时立即触发更新（默认是失焦才更新）
- 支持
.debounce.500ms防抖，如wire:model.live.debounce.300ms - 所有 public 属性都会被 Livewire 管理，无需手动序列化
基本上就这些。不复杂但容易忽略细节：确保组件名小写中划线（如 user-profile），PHP 类名驼峰（UserProfile），Blade 文件路径要匹配。写完刷新页面，交互就生效了。
以上就是Laravel如何使用Livewire构建动态组件？（入门代码）的详细内容，更多请关注php中文网其它相关文章！