Laravel Volt 是 Livewire 官方推出的一套“函数式、单文件组件”API,可以理解为 Livewire 的「轻量语法糖」。
一句话总结:
在单个 .blade.php
文件里同时写 PHP 逻辑 + Blade 视图,就能得到一个完整的 Livewire 组件,不用再建类文件。
核心特点
能力 | 说明 |
单文件组件 | PHP 逻辑与 Blade 模板共存于同一文件,省去 class 和 render() 样板代码。 |
函数式 API | 用 state() 、rules() 、action() 等全局函数声明数据、验证、行为,写法接近 Vue 3 Composition API。 |
幕后编译 | 文件保存时自动被编译为传统 Livewire 类组件,功能 100% 兼容,不需要改旧代码。 |
可选全页组件 | 直接在 routes/web.php 用 Volt::route('/users', 'user-index') 把组件当整页用。 |
与 Folio 配合 | 在基于页面的路由 Folio 中,可用 @volt 指令把页面局部快速变成交互组件。 |
30 秒上手示例
文件:resources/views/livewire/counter.blade.php
<?php
use function Livewire\Volt\{state};
state(['count' => 0]);
$increment = fn () => $this->count++;
?>
<div>
<h1>{{ $count }}</h1>
<button wire:click="increment">+</button>
</div>
渲染方式与以前完全一样:
<livewire:counter />
即可得到一个实时计数器,无需额外的 PHP 类文件。
安装
composer require livewire/volt
php artisan volt:install # 发布服务提供者并设置组件目录
php artisan make:volt todo # 快速生成单文件组件
何时使用 Volt
- 想减少文件数量、快速迭代的小组件
- 更喜欢“函数式”风格或从 Vue 转过来的开发者
- 用 Laravel Folio 做静态页面但需要局部交互时
一句话记忆:
Volt = Livewire 的单文件组件 + 函数式语法,让你用“一个 Blade 文件”就能写完带交互的页面。