How to utilise emitUp type behaviour from a modal?

[mlewist]

I don't seem to be able to utilise emitUp from within a Modal, and I'm wondering if this is just not possible or I'm being dumb...

So the scenario is I have

1. Primary Livewire component - a list of invoices
2. Child Livewire components - invoice items (so that I can make changes to each invoice without needing to refresh the whole list each time)
3. Modals being opened from within those invoice item components (Mark as Paid, Cancel etc)

The behaviour I want to be able to do is emit to the specific component from where I opened the modal so that only invoice with ID of 1 gets the information that invoice id 1 has been marked as paid, rather than every single component on the page getting that info. If I emit it to the primary component, then the entire list of child components will get re-rendered, so is undesirable.

[mlewist]

Okay I just needed to dig a little further - this had come up in discussion on the Livewire repo before and Caleb had suggested a solution of dynamic listener names

livewire/livewire#845 (comment)

Then someone elaborated on this in a blog post: https://www.matthewerwin.co.uk/blog/single-component-events-in-laravel-livewire/?utm_source=github&utm_campaign=livewire/livewire/issues/845

So for me, in my various modals:

$this->closeModalWithEvents([
  InvoiceItem::getName() => 'invoicePaid:' . $this->invoice->id,
]);

And in the InvoiceItem component, instead of declaring protected $listeners = [], you do

protected function getListeners()
{
    return [
      'invoicePaid:' . $this->invoice->id => '$refresh',
      ...
    ];
}