无法将具有特征的父组件中的选定数据数组传递给嵌套组件

Question

• App/Http/Livewire

1. UserController-Livewire/UserManagement/UserController
2. 数据表/特征/数据表

• 资源/视图/livewire

1. 用户控制器刀片-livewire/用户管理/用户控制器

我正在创建一个CRUD系统，使用批量操作删除所选数据。我已经提取了负责选择多个项目或选择当前数据表中的所有项目的逻辑，即用户控制器，所以我可以使用它作为一个特性，即用户控制器。在其他数据表组件中。trait只负责选择多个项目或从数据表中选择所有项目。根据删除数组数据的公共函数方法，存在于控制器本身的数据表组件即。用户控制器。现在，为了使批量操作的多重选择工作，我必须在数据表组件刀片视图中包括确认模态，它负责触发删除数据数组的方法，即。用户控制器刀片。当我在用户控制器中包含删除所选数据的确认模式时，它可以完美地工作。而每一行都有一个复选框，该复选框建模为线：Model="选择"，值="{{$user-

UserController组件中的rowsQuery属性在查询中使用过滤器从用户模型获取数据，排序并将其作为属性返回。

public function getRowsQueryProperty()
    {
        $query = User::query()
            ->when($this->filters['email'], fn($query, $email) => $query->where('email', 'like', '%'.$email.'%'))
            ->when($this->filters['role'], fn($query, $role) => $query->whereHas('roles', fn ($query) => $query->where('id', $role)))
            ->when($this->filters['search'], fn($query, $search) => $query->where('name', 'like', '%'.$search.'%'))
            ->when($this->filters['date-min'], fn($query, $created_at) => $query->where('created_at', '>=', Carbon::createFromFormat('d/m/Y', $created_at)))
            ->when($this->filters['date-max'], fn($query, $created_at) => $query->where('created_at', '<=', Carbon::createFromFormat('d/m/Y', $created_at)));
        
        return $this->applySorting($query);
    }

然后在trait中的selectedRowsQuery属性中克隆rowsQuery，并使用bulkActions。

public function getSelectedRowsQueryProperty()
    {
        return (clone $this->rowsQuery)
            ->unless($this->selectAll, fn($query) => $query->whereKey($this->selected));
    }

如果正在选择一个数据数组，并且应删除所选数据，则由位于UserController组件中的公共函数confirmDeleteBulk（）负责，以下公共函数调用在trait本身中初始化的selectedRowsQuery属性，然后执行delete（）方法并相应地通知。

public function confirmDeleteBulk()
    {
        $deleteCount = $this->selectedRowsQuery->count();
        foreach ($this->selectedRowsQuery->get() as $queryRow) {
            $queryRow->roles()->detach();
        }
        $this->selectedRowsQuery->delete();
        $this->showUserBulkDeletionModal = false;
        $this->notify('You\'ve deleted '.$deleteCount.' users');
    }

我尝试使用public function方法制作一个单独的livewire组件，通过显示确认模式来删除所选数据，但无法将所选行数传递给位于livewire/UserManagement/LogicalComponent/userbulkdeletation的userbulkdeletation嵌套组件。请告诉我在这种情况下最好的用例，如果我想要的是可能的。我将非常感谢您的帮助，因为我从两周前就开始这么做了。

上下文

• Livewire版本：2.3.8
• Laravel版本：8.24.0
• 高山版：2.8.0
• 浏览器：Chrome

• Livewire/UserManagement/UserController

class UserController extends Component
{
    use WithCachedRows, WithSorting, WithBulkActions, WithPerPagePagination;

    public User $user;
    public $showFilters = false;
    public $filters = [
        'search' => "",
        'email' => null,
        'role' => '',
        'date-min' => null,
        'date-max' => null,
    ];

    protected $listeners = ['sectionRefresh' => '$refresh'];

    public function toggleShowFilters()
    {
        $this->useCachedRows();

        $this->showFilters = ! $this->showFilters;
    }

    public function resetFilters() 
    {
        $this->reset('filters'); 
    }

    public function updatedFilters() 
    {
        $this->resetPage();
    }
    
    public function getRowsQueryProperty()
    {
        $query = User::query()
            ->when($this->filters['email'], fn($query, $email) => $query->where('email', 'like', '%'.$email.'%'))
            ->when($this->filters['role'], fn($query, $role) => $query->whereHas('roles', fn ($query) => $query->where('id', $role)))
            ->when($this->filters['search'], fn($query, $search) => $query->where('name', 'like', '%'.$search.'%'))
            ->when($this->filters['date-min'], fn($query, $created_at) => $query->where('created_at', '>=', Carbon::createFromFormat('d/m/Y', $created_at)))
            ->when($this->filters['date-max'], fn($query, $created_at) => $query->where('created_at', '<=', Carbon::createFromFormat('d/m/Y', $created_at)));
        
        return $this->applySorting($query);
    }

    public function getRowsProperty()
    {
        return $this->cache(function () {
            return $this->applyPagination($this->rowsQuery);
        });
    }

    public function getRolesProperty()
    {
        $roles = Role::all();
        return $roles;
    }
    
    public function render()
    {
        return view('livewire.backend.management.audience-management.user-controller', ['users' => $this->rows, 'roles' => $this->roles]);
    }
}

• Livewire/UserManagement/LogicalComponent/UserBulkDeletion

class UserBulkDeletion extends Component
{
    use WithCachedRows, WithBulkActions, WithSorting;
    
    public $showUserBulkDeletionModal = false;
    public User $user;
    public $filters = [
        'search' => "",
        'email' => null,
        'role' => '',
        'date-min' => null,
        'date-max' => null,
    ];

    protected $listeners = ['deleteUserBulk'];

    public function deleteUserBulk()
    {
        $this->useCachedRows();

        $this->showUserBulkDeletionModal = true;
    }

    public function confirmDeleteBulk()
    {
        $deleteCount = $this->selectedRowsQuery->count();
        
        foreach ($this->selectedRowsQuery->get() as $queryRow) {
            $queryRow->roles()->detach();
        }

        $this->selectedRowsQuery->delete();
        $this->showUserBulkDeletionModal = false;

        $this->notify('You\'ve deleted '.$deleteCount.' users');
        $this->emit('sectionRefresh');
    }

    public function getRowsQueryProperty()
    {
        $query = User::query()
            ->when($this->filters['email'], fn($query, $email) => $query->where('email', 'like', '%'.$email.'%'))
            ->when($this->filters['role'], fn($query, $role) => $query->whereHas('roles', fn ($query) => $query->where('id', $role)))
            ->when($this->filters['search'], fn($query, $search) => $query->where('name', 'like', '%'.$search.'%'))
            ->when($this->filters['date-min'], fn($query, $created_at) => $query->where('created_at', '>=', Carbon::createFromFormat('d/m/Y', $created_at)))
            ->when($this->filters['date-max'], fn($query, $created_at) => $query->where('created_at', '<=', Carbon::createFromFormat('d/m/Y', $created_at)));
        
        return $this->applySorting($query);
    }

    public function render()
    {
        return view('livewire.backend.management.audience-management.logical-component.user-bulk-deletion');
    }
}

• Livewire/Traits/DataTable/And BulkActions

trait WithBulkActions
{
    public $selectPage = false;
    public $selectAll = false;
    public $selected = [];

    public function renderingWithBulkActions()
    {
        if ($this->selectAll) $this->selectPageRows();
    }

    public function updatedSelected()
    {
        $this->selectAll = false;
        $this->selectPage = false;
    }

    public function updatedSelectPage($value)
    {
        if ($value) return $this->selectPageRows();

        $this->selectAll = false;
        $this->selected = [];
    }

    public function selectPageRows()
    {
        $this->selected = $this->rows->pluck('id')->map(fn($id) => (string) $id);
    }

    public function selectAll()
    {
        $this->selectAll = true;
    }

    public function getSelectedRowsQueryProperty()
    {
        return (clone $this->rowsQuery)
            ->unless($this->selectAll, fn($query) => $query->whereKey($this->selected));
    }
}

• 视图/livewire/用户管理/逻辑组件/用户批量删除

<div>
    <form wire:submit.prevent="confirmDeleteBulk">
        <x-modal.confirmation wire:model.defer="showUserBulkDeletionModal">
            <x-slot name="title">Delete User</x-slot>

            <x-slot name="content">
                @json($selected)
                Are you sure you want to delete users? This action is irreversible!
            </x-slot>

            <x-slot name="footer">
                <x-button.secondary wire:click="$set('showUserBulkDeletionModal', false)">Cancel</x-button.primary>

                <x-button.primary type="submit">Delete</x-button.primary>
            </x-slot>
        </x-modal.confirmation>
    </form>
</div>




Answer 1

要将值从一个Livewire组件传递到另一个组件，请使用事件。

Livewire组件可以通过全局事件系统相互通信。只要两个Livewire组件位于同一个页面上，它们就可以使用事件和监听器进行通信。

在您的一个Livewire组件中，您触发了如下事件

$this->event('usersToDelete', [ 1,2,3 ]);

在另一个组件中，您可以侦听此事件

public class MyOtherComponent extends Component
{

    protected $listeners = [
      'usersToDelete' => 'deleteUsers'
    ];

    public function deleteUsers(array $user)
    {
      // .. do something
    }
}