如何使用Jetstream和Livewire获取数据并调用Jetstream自定义组件

• 第一步：创建Jetstream组件对应的视图组件类
  执行Artisan命令生成基础组件类：
  php artisan make:component Users
  生成的文件位于app/View/Components/Users.php，修改文件内容如下：

<?php

namespace App\View\Components;

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

class Users extends Component
{
    public $users;

    // 支持外部传入自定义用户集合，不传则默认查询全部
    public function __construct($users = null)
    {
        $this->users = $users ?? User::all();
    }

    public function render()
    {
        // 指向你已经创建的Jetstream组件视图路径
        return view('vendor.jetstream.components.users');
    }
}

• 第二步：注册组件为jet前缀别名
  打开app/Providers/AppServiceProvider.php，在boot方法中添加组件别名注册代码：

use Illuminate\Support\Facades\Blade;

public function boot()
{
    // 其他已有代码...
    Blade::component('jet-users', \App\View\Components\Users::class);
}

配置完成后就可以全局通过<x-jet-users>的方式调用组件，不需要移动原有的users.blade.php文件位置。

• 第三步：适配Livewire场景使用
  如果要在Livewire组件中使用该组件，有两种用法：

1. 直接调用，让Jetstream组件自行加载用户数据：
   在你的Livewire视图中直接写<x-jet-users />即可，不需要在Livewire类中编写查询用户的逻辑。
2. 从Livewire传入自定义查询的用户集合：
   在Livewire类中编写查询逻辑：

public function render()
{
    // 可自定义查询条件，比如分页、筛选
    $users = User::where('is_active', 1)->get();
    return view('livewire.user-list', compact('users'));
}

在对应的Livewire视图中传入参数即可：
<x-jet-users :users="$users" />

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