Livewire父组件未监听子组件$emit问题排查求助

问题现象 #

1. 初始点击按钮时，myTest和handleTest方法可正常执行，但后续Index组件的handleTest不再触发
2. 触发forTest事件后，文章列表的最后一篇会跑到首位（如图）

代码示例 #

index.blade.php #

<div class="container">
    <livewire:layouts.header />

    <div class="row">
        <div class="col-12">
            <h3>
                Articles List
            </h3>

            @foreach($articles as $article)
                <livewire:articles.article-box :article="$article" />
            @endforeach
        </div>
    </div>
</div>

Index.php #

class Index extends Component {

    protected $listeners = [
        'forTest' => 'handleTest'
    ];

    public function handleTest() {
        Log::info('run HandleTest in Index Articles');

    }

    public function render() {
        return view('livewire.articles.index', [
            'articles' => Article::latest()->paginate(5)
        ]);
    }
}

article-box.blade.php #

<div>
    <h4>
        {{ $article->title }}
    </h4>
    <p>
        {{ $article->body }}
    </p>
    <div>
        like : {{ $article->like }}
        <button class="btn btn-danger btn-sm" wire:click="like">
            like
        </button>
    </div>
    <hr>
</div>

ArticleBox.php #

class ArticleBox extends Component {

    public Article $article;

    public function like() {
        //$this->article->increment('like');
        $this->emit('forTest');
    }

    public function render() {
        return view('livewire.articles.article-box');
    }
}

header.blade.php #

<div>
    <ul>
        <li>Home</li>
        <li>About</li>
    </ul>
</div>

Header.php #

class Header extends Component {

    protected $listeners = [
        'forTest' => 'myTest'
    ];

    public function myTest() {
        Log::info('run myTest in Header');
    }

    public function render() {
        return view('livewire.layouts.header');
    }
}

问题根源 #

1. 子组件无唯一key导致事件监听失效：在index.blade.php的循环中渲染article-box组件时，未指定wire:key。Livewire依赖唯一key追踪组件实例，缺少key会导致组件复用逻辑混乱，后续触发事件时父组件的监听无法正确响应。
2. 组件复用引发顺序错乱：同样因为缺少wire:key，父组件重新渲染时，Livewire会复用现有组件实例而非按数据顺序重新渲染，最终出现文章位置错乱的情况。

修复方案 #

在循环渲染article-box组件时，添加以文章ID为标识的唯一wire:key：

@foreach($articles as $article)
    <livewire:articles.article-box :article="$article" wire:key="article-box-{{ $article->id }}" />
@endforeach

添加后Livewire能准确追踪每个子组件实例，既保证事件监听始终有效，也不会出现组件复用导致的顺序错乱问题。

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