Livewire Volt 拥有新的基于类的 API

Laravel 团队最近发布了 Volt，它允许你直接在 Blade 视图中构建完整的 Livewire 组件。最初，它是使用函数式语法发布的。你可以导入 Volt 的函数并将你的 Livewire 功能（例如状态、计算属性、操作等）包装在这些函数中。

例如，使用函数式语法创建帖子的简单组件

<?php
 
use App\Models\Post;
use function Livewire\Volt\{state};
use function Livewire\Volt\{rules};
 
state([
    'title' => '',
    'content' => '',
]);
 
rules([
    'title' => ['required', 'max:250'],
    'content' => ['required', 'max:10000'],
]);
 
$save = function () {
    $this->validate();
 
    Post::create([
        'title' => $this->title,
        'content' => $this->content,
    ]);
 
    return redirect('/posts');
}
?>
 
<form wire:submit="save">
    <div>
        <label>Title</label>
        <input wire:model="title" type="text" />
    </div>
    <div>
        <label>Content</label>
        <textarea wire:model="content"></textarea>
    </div>
 
    <button>Save</button>
</form>

截至今天，Laravel 团队已经发布了 v1.0-beta.3，它引入了 Volt 组件的新基于类的语法。这允许你使用你习惯的更传统语法来编写 Livewire 组件，但仍然全部在你的 Blade 文件中。

例如，使用新的基于类语法编写的相同创建帖子组件

<?php
 
use App\Models\Post;
use Livewire\Volt\Component;
use Livewire\Attributes\Rule;
 
new class extends Component
{
    #[Rule(['required', 'max:250'])]
    public $title = '';
 
    #[Rule(['required', 'max:10000'])]
    public $content = '';
 
    public function save() {
        $this->validate();
 
        Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);
 
        return redirect('/posts');
    }
}
?>
 
<form wire:submit="save">
    <div>
        <label>Title</label>
        <input wire:model="title" type="text" />
    </div>
    <div>
        <label>Content</label>
        <textarea wire:model="content"></textarea>
    </div>
 
    <button>Save</button>
</form>