如何将Livewire组件的用户数据传递给Blade组件？

1. 修正Livewire组件的属性定义 #

先补全属性的public修饰符和$符号（你之前的代码遗漏了）：

public $dataAlumni;
public $showingUserProfileCard = false;

public function showUserProfileCard(User $alumni){
    $this->dataAlumni = $alumni;
    $this->showingUserProfileCard = true;
}

2. 传递Livewire组件中的用户数据到ProfileCard #

在模态框内的<x-profile-card>标签中，直接绑定Livewire组件的$dataAlumni属性，不要使用循环里的$alumni：

<x-modal maxWidth="fit" wire:model="showingUserProfileCard">
    <x-profile-card :user="$dataAlumni" />
</x-modal>

3. 确保ProfileCard组件正确接收属性 #

如果是类组件，在组件类中定义$user属性：

// app/View/Components/ProfileCard.php
namespace App\View\Components;

use App\Models\User;
use Illuminate\View\Component;

class ProfileCard extends Component
{
    public $user;

    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function render()
    {
        return view('components.profile-card');
    }
}

如果是匿名组件，在组件的Blade文件开头声明user属性：

<!-- resources/views/components/profile-card.blade.php -->
@props(['user'])

<!-- 组件内容示例 -->
<div class="profile-card">
    <h2>{{ $user->name }}</h2>
    <p>{{ $user->email }}</p>
    <!-- 其他用户信息字段 -->
</div>

4. 可选：关闭模态框时重置数据 #

为避免关闭模态框后残留旧数据，可在Livewire组件中添加更新钩子：

public function updatedShowingUserProfileCard($isOpen)
{
    if (!$isOpen) {
        $this->dataAlumni = null;
    }
}

内容的提问来源于stack exchange，提问作者Zulfiqry Saadputra