LaravelLivewire-如何强制子组件刷新
我想在更新父组件时刷新子组件，并且只有该组件的子组件应该更新，因为我想在页面的其他地方重用子组件。组件结构如下。
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');
}
}
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');
}
}
UserShowEmail.php
<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>
class UserShowEmail extends Component
{
/** @var User */
public $user;
public function render() {
return view('livewire.user-show-email');
}
}
当用户UserShow通过updatedUserId()方法更改时，我希望该$user道具UserShowEmail会相应更改。通过阅读文档，Livewire 似乎无法自动刷新子组件。
我想知道是否有解决方法，或者允许我在父组件更改时刷新子组件。
谢谢！
回答
如果您不介意更新整个子组件，这将是一种方法：
当我想让子 Livewire 组件“反应性”时，有一个技巧总是对我有用。在您的父 livewire 组件中，您对 key 属性使用时间戳：
<livewire:child-component key="{{ now() }}" :my-prop="$myModel" />棘手的部分是
now()key prop 中的函数。当父组件更新时，此组件现在将始终更新。
在您的父组件中：
<div>
...
<div>
Name: {{ $user->name }}
<livewire:user-show-email key="{{ now() }}" :user="$user" />
</div>
</div>
您可以在此处和此处阅读有关它的更多信息。