昨天提到了互动事件（Action）基本上能解决大部分页面中互动的需求，但若要能够跨元件来进行互动，例如呼叫其他元件中的 Function 就要靠今天的 $emit 事件啦～

Emit 事件

不光是能够从 Template Blade 中使用，也能够从 Livewire 元件中的 Function 使用，甚至还能在 JavaScript 中呼叫使用。

在 Template Blade 使用

<button wire:click="$emit('postAdded')">

在 Livewire 元件中使用

$this->emit('postAdded');

在 JavaScript 中使用

<script>
    Livewire.emit('postAdded')
</script>

设置监听 - Event Listeners

不过在使用 emit 前必须先在各个有要用到的元件中先宣告监听才能够成功透过 $emit 呼叫该元件中的 Function。

注意： 这边是很多人常常忘记做的步骤而导致怎样都呼叫不到，且 emit 是全域呼叫并不会提示是否呼叫成功或是报错。

class Day8 extends Component
{
    ...
    
    protected $listeners = ['toggleTitle' => 'toggleTitle'];

    public function render()
    {
        return view('livewire.example.day8');
    }

    public function toggleTitle()
    {
        ...
    }
}

外面 $emit 的名称也可以跟实际函数名称的不一样，像是这边我这个元件中使用的是 setTitleVisible () 而外面一样透过 $emit('toggleTitle') 来呼叫。

protected $listeners = ['toggleTitle' => 'setTitleVisible'];

传递参数

要传递参数也是非常简单的事：

$this->emit('postAdded', $post->id);

   protected $listeners = ['postAdded'];
 
    public function postAdded($id)
    {
        ...
    }

范围 - Scoping Events

由於 $emit 的范围可涵盖至目前页面上所有的 Livewire，也能做全域呼叫使用，换句话说就是能触发不同 Livewire 元件中同名的 Function，可以参考 Github 上 Day8 的范例。但有时候并不需要呼叫到全部的元件，那这时候就有以下几种方法可以只呼叫特定元件中的 Function：

* 只呼叫父元件 emitUp

$this->emitUp('postAdded');

<button wire:click="$emitUp('postAdded')">

* 透过元件名称呼叫 emitTo

$this->emitTo('counter', 'postAdded');

<button wire:click="$emitTo('counter', 'postAdded')">

* 只呼叫自己本身 emitSelf

$this->emitSelf('postAdded');

<button wire:click="$emitSelf('postAdded')">

在 JavaScript 中监听事件

资料储存成功後，要在页面显示成功的讯息还是需要透过 JS 来执行，毕竟那些放在按钮中的 wire:click() 事件没办法回传值，也没办法在 PHP 呼叫 JS 的 Function。那就只能够过这个方法来做产生操作回馈。

因此我们可以在 blade 的 script 区块中建立一个监听器，并透过 alert 来显示操作成功的讯息：

<script>
Livewire.on('postAdded', () => {
    alert('文章已经发布罗！');
})
</script>

之後的 $emit('postAdded') 也会触发上面的 JS 区块罗 ～

注意：这里的 <script> 必须放在 Layout 的页面才会生效，或者使用 @stack('scripts') 及 @push('scripts') 来将 JS 的部分塞回 Layout 中才会生效，程序码可以参考我的 Day8 示范。

＊如果觉得复杂建议使用下方浏览器监听的方法，会简单很多！！

触发浏览器的监听事件

也可以直接触发浏览器的监听事件，但这边就要使用 dispatchBrowserEvent () 而不是 emit()：

$this->dispatchBrowserEvent('postAdded');

在 blade 上则要用 window.addEventListener 来建立监听：

<script>
window.addEventListener('postAdded', () => {
    alert('文章已经发布罗！');
})
</script>

范例

GitHub 网址在这边

运行之後打开 http://127.0.0.1:8000/day8 就能看到今天的范例啦！

档案的话分别在：
app\Http\Livewire\Example\Day8.php
resources\views\livewire\example\day8.balde.php

今天的范例会演示：

1. 透过 $emit 同时呼叫 Day8 与 Day8Child 中的 toggleTitle()。
2. 透过 JavaScript 来接收 $emit 的事件。
3. 透过 浏览器的监听器 来接收 dispatchBrowserEvent 事件。