属性

公共属性

Livewire 组件将数据存储和跟踪为组件类上的公共属性。

class HelloWorld extends Component
{
    public $message = 'Hello World!';
    ...

Livewire中的公共属性将自动传递给视图，您无需将它们显式传递到视图中（尽管您可以根据需要）。

HelloWorld.php

use Livewire\Component;

class HelloWorld extends Component
{
    public $message = 'Hello World!';

    public function render()
    {
        return view('livewire.hello-world');
    }
}

hello-world.blade.php

<div>
    <h1>{{ $message }}</h1>
    <!-- Will output "Hello World!" -->
</div>

重要提示

在开始Livewire旅程之前，需要注意以下三点关于公共资源的事项：

1. 存储在公共属性中的数据对前端 JavaScript 可见。 因此，您不应在其中存储敏感数据。
2. 属性只能是 JavaScript 友好的数据类型（“字符串”，“ 整型”，“数组”，“布尔”）或 eloquent 模型（或模型集合）。
3. 对于 PHP >= 7.4 的用户: Livewire组件中的公共属性当前不支持属性类型声明。

protected 和 private 属性在 Livewire 更新之间不存在。 通常，应避免使用它们来存储状态。

初始化属性

您可以使用组件的 mount 方法初始化属性。

HelloWorld.php

use Livewire\Component;

class HelloWorld extends Component
{
    public $message;

    public function mount()
    {
        $this->message = 'Hello World!';
    }

    public function render()
    {
        return view('livewire.hello-world');
    }
}

Livewire 还为您提供了 $this->fill() 方法，用于您必须设置大量属性的情况。

HelloWorld.php

public function mount()
{
    $this->fill(['message' => 'Hello World!']);
}

此外，Livewire 还提供 $this->reset() 以编程方式将公共属性值重置为其初始状态。 这对于执行操作后清除输入字段很有用。

Component

数据绑定

如果您使用过诸如Vue或Angular之类的前端框架，那么您已经熟悉此概念。 但是，如果您不熟悉此概念，Livewire可以将某些HTML元素的当前值与组件中的特定属性“绑定”（或“同步”）。

HelloWorld.php

use Livewire\Component;

class HelloWorld extends Component
{
    public $message;

    public function render()
    {
        return view('livewire.hello-world');
    }
}

hello-world.blade.php

<div>
    <input wire:model="message" type="text">

    <h1>{{ $message }}</h1>
</div>

当用户在文本字段中输入内容时，$message 属性的值将自动更新。

底层 Livewire 将侦听元素上的 input 事件，并在触发时将发送AJAX请求以使用新数据重新渲染组件。

您可以在任何输入事件的元素中添加wire:model。 甚至自定义元素或第三方JavaScript库。

在wire:model上使用的常见元素包括：

文本输入消除抖动

默认情况下，Livewire会将 150ms 的消除抖动应用于文本输入。 这样可以避免在用户键入文本字段时发送太多网络请求。

如果您希望覆盖此默认值（或将其添加到非文本输入中），Livewire会提供一个“debounce”修饰符。 如果要对输入应用半秒的去抖动，则应包括如下修饰符：

<input type="text" wire:model.debounce.500ms="name">

绑定嵌套数据

Livewire支持使用点表示法绑定到数组内的嵌套数据：

<input type="text" wire:model="parent.message">

懒更新

默认情况下，Livewire 在每个输入事件（或某些情况下发生更改）之后向服务器发送请求。 这对于通常不触发快速更新的元素如<select>来说通常是好的，但是，对于随用户输入而更新的文本字段而言，这通常是不必要的。

在这种情况下，请使用lazy指令修饰符来监听本地的“ change”事件。

<input type="text" wire:model.lazy="message">

现在，仅当用户单击输入字段之外时，才会更新 $message 属性。

更新 Query String

有时，当组件状态更改时，更新浏览器的查询字符串很有用。

例如，如果您要构建“搜索帖子”组件，并希望查询字符串反映当前的搜索值，如下所示：

https://your-app.com/search-posts?search=some-search-string

这样，当用户单击“后退”按钮或将页面添加为书签时，您可以从查询字符串中获取初始状态，而不必每次都重置组件。

在这种情况下，您可以将属性名称添加到受保护的 $updatesQueryString 中，并且每次属性值更改时，Livewire都会更新查询字符串。

SearchPosts.php

use Livewire\Component;

class SearchPosts extends Component
{
    public $search;

    protected $updatesQueryString = ['search'];

    public function mount()
    {
        $this->search = request()->query('search', $this->search);
    }

    public function render()
    {
        return view('livewire.search-posts', [
            'posts' => Post::where('title', 'like', '%'.$this->search.'%')->get(),
        ]);
    }
}

search-posts.blade.php

<div>
    <input wire:model="search" type="text" placeholder="Search posts by title...">

    <h1>Search Results:</h1>

    <ul>
        @foreach($posts as $post)
            <li>{{ $post->title }}</li>
        @endforeach
    </ul>
</div>

保持干净的 Query String

在上述情况下，当search属性为空时，查询字符串将如下所示：

?search=

在其他情况下，如果不是默认设置，则可能只希望在查询字符串中表示一个值。

例如，如果您具有 $page 属性来跟踪组件中的分页，则当用户位于第一页上时，可能要从查询字符串中删除page属性。

在这种情况下，可以使用以下语法：

SearchPosts.php

use Livewire\Component;

class SearchPosts extends Component
{
    public $foo;
    public $search = '';
    public $page = 1;

    protected $updatesQueryString = [
        'foo',
        'search' => ['except' => ''],
        'page' => ['except' => 1],
    ];

    public function mount()
    {
        $this->fill(request()->only('search', 'page'));
    }

    ...
}

格式化 Properties

Livewire提供了一个API，可将公共属性“映射”为更有用的数据类型。 两种常见的用例是使用日期对象（如Carbon实例）并处理Laravel集合：

class CastedComponent extends Component
{
    public $options = ['foo', 'bar', 'bar'];
    public $expiresAt = 'tomorrow';
    public $formattedDate = 'today';

    protected $casts = [
        'options' => 'collection',
        'expiresAt' => 'date',
        'formattedDate' => 'date:m-d-y'
    ];

    public function getUniqueOptions()
    {
        return $this->options->unique();
    }

    public function getExpirationDateForHumans()
    {
        return $this->expiresAt->format('m/d/Y');
    }

    ...

Custom Casters

Livewire允许您针对自定义用例构建自己的自定义格式化。 在一个类中实现 Livewire\Castable 接口，并在 $casts 属性中引用它：

class FooComponent extends Component
{
    public $foo = ['bar', 'baz'];

    protected $casts = ['foo' => CollectionCaster::class];

    ...

use Livewire\Castable;

class CollectionCaster implements Castable
{
    public function cast($value)
    {
        return collect($value);
    }

    public function uncast($value)
    {
        return $value->all();
    }
}

动态属性

Livewire提供了一个用于访问动态属性的API。 这对于从数据库或另一个持久性存储（如缓存）派生属性特别有用。

class ShowPost extends Component
{
    // Computed Property
    public function getPostProperty()
    {
        return Post::find($this->postId);
    }

现在，您可以从组件的类或刀片视图访问$this->post了：

ShowPost.php

use Livewire\Component;

class ShowPost extends Component
{
    public $postId;

    public function mount($postId)
    {
        $this->postId = $postId;
    }

    public function getPostProperty()
    {
        return Post::find($this->postId);
    }

    public function deletePost()
    {
        $this->post->delete();
    }

    public function render()
    {
        return view('livewire.show-post');
    }
}

show-post.blade.php

<div>
    <h1>{{ $this->post->title }}</h1>
    ...
    <button wire:click="deletePost">Delete Post</button>
</div>

单个 Livewire 请求生命周期的计算属性将被缓存。 这意味着，如果您在组件的刀片视图中调用 $this->post 5次，它将不会每次都进行单独的数据库查询。