<div x-data="{ foo: 'bar' }" x-on:custom-event="foo = $event.detail.newValue">
    <span x-text="foo"></span>

    <button x-on:click="$dispatch('custom-event', {newValue: 'baz'})">btn</button>
</div>

x-on:custom-event="foo = $event.detail.newValue"
這裡的custom-event可以創建一個事件，
經由**$event.detail.newValue**來提供屬性，
span標籤裡的 x-text="foo"預設文字為'foo'，
button的click事件寫了x-on:click="$dispatch('custom-event', {newValue: 'baz'})"
其觸發自己創建的事件，將newValue帶入'baz'，
而foo就會變成'baz'，
因此列印出的文字會從'foo'變成'baz'