Laravel Livewire Volt拥有基于类的新API

Laravel  /  管理员 发布于 1年前   479

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>

您怎么看？你更喜欢功能性语法还是更传统的基于类的语法？

就我个人而言，我更喜欢基于类的语法，但很高兴看到 Laravel 团队为人们提供了多种构建功能的方法！

相关链接：

https://livewire.laravel.com/docs/volt
https://github.com/livewire/volt