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

Posted 2023-02-22

【中文标题】Laravel Livewire - 如何强制子组件刷新

【英文标题】：Laravel Livewire - How to force child component refresh

【发布时间】：2021-03-31 04:40:58

【问题描述】：

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

UserShow.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>

当UserShow 中的用户通过updatedUserId() 方法更改时，我希望UserShowEmail 中的$user 属性会相应更改。通过阅读the docs，Livewire 似乎无法自动刷新子组件。

我想知道是否有解决方法，或者允许我在父组件更改时刷新子组件。

谢谢！

【参考方案1】：

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

当我想生孩子时，总有一个技巧对我有用 Livewire 组件“反应性”。在您的父 livewire 组件中，您 为关键属性使用时间戳：

<livewire:child-component key=" now() " :my-prop="$myModel" />

棘手的部分是 key prop 中的now() 函数。现在这个组件 当父级更新时将始终更新。

在你的父组件中：

<div>
    ...

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

您可以在here 和here 阅读更多相关信息。

【讨论】：

太棒了！ Thnks Remul，它有效！现在我将用户 ID 用作key，这样它应该只有在父组件中的用户更新时才更新子组件。

这似乎很难测试。如何测试子组件？

另外需要注意的是，组件每次都会被销毁和挂载。

根据具体情况，这可能有用或导致问题。我发现我自己使用事件来传达更改而不是这个解决方案。

@reppair 您将如何使用事件来更新表格的内容？它不是那么容易。比如说，如果排序发生变化