提问者:小点点

Laravel Livewire-如何强制子组件刷新


我想在父组件更新时刷新子组件,并且只有该组件的子组件应该更新,因为我想在页面的其他地方重用子组件。组件结构如下。

用户how.php

class UserShow extends Component
{
    public User $user;
    public int $userId;

    public function mount() {
        $this->user = User::first();
    }

    public function updatedUserId() {
        $this->user = User::find($this->userId);
    }

    public function render() {
        return view('livewire.user-show');
    }
}
<div>
    <select wire:model="userId">
        <option value="1">Matteo</option>
        <option value="2">Giulia</option>
        <option value="3">Mattia</option>
    </select>

    <div>
        Name: {{ $user->name }}
        @livewire('user-show-email', ['user' => $user])
    </div>
</div>

UserShowEmail.php

class UserShowEmail extends Component
{
    /** @var User */
    public $user;

    public function render() {
        return view('livewire.user-show-email');
    }
}
<div>
    Email: {{ $user->email }}
</div>

当通过updateUserID()方法更改UserShow中的用户时,我希望usershowmail中的$user属性将相应更改。通过阅读文档,Livewire似乎无法自动刷新子组件。

我想知道是否有一种变通方法,或者当父组件发生更改时允许我刷新子组件。

谢谢


共1个答案

匿名用户

如果您不介意更新整个子组件,这将是一种方法:

当我想让子Livewire组件成为“被动”组件时,有一个技巧对我总是有效的。在父livewire组件中,您为键属性使用时间戳:

<代码>

棘手的部分是key prop中的now()函数。当父组件更新时,该组件将始终更新。

在父组件中:

<div>
    ...

    <div>
        Name: {{ $user->name }}
        <livewire:user-show-email key="{{ now() }}" :user="$user" />
    </div>
</div>

你可以在这里和这里阅读更多关于它的信息。