组件属性

未匹配的标注

属性

公共属性

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组件中的公共属性当前不支持属性类型声明。

protectedprivate 属性在 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上使用的常见元素包括:

Element Tag
<input type="text">
<input type="radio">
<input type="checkbox">
<select>
<textarea>

文本输入消除抖动

默认情况下,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次,它将不会每次都进行单独的数据库查询。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~