การใช้งาน Event Bus

---

1. ความเข้าใจเกี่ยวกับ Event Bus

Event Bus ใน Alpine.js เป็นกลไกที่ช่วยให้ Component ต่าง ๆ สามารถสื่อสารกันได้โดยการส่งและรับ Event

• ใช้ $dispatch เพื่อส่ง Event และ @event-name เพื่อรับ Event
• เหมาะสำหรับสถานการณ์ที่ต้องการให้ Component หลายตัวทำงานร่วมกัน โดยไม่ต้องผูก State ร่วมกัน

---

2. การส่ง Event ด้วย $dispatch

ตัวอย่าง: การส่ง Event

<div x-data>
    <button @click="$dispatch('custom-event', { message: 'Hello from Component 1' })">Send Event</button>
</div>

คำอธิบาย:

• ใช้ $dispatch('custom-event', payload) เพื่อส่ง Event ชื่อ custom-event พร้อมข้อมูล (payload)

---

3. การรับ Event ด้วย @event-name

ตัวอย่าง: การรับ Event

<div x-data @custom-event.window="alert($event.detail.message)">
    <p>Waiting for Event...</p>
</div>

คำอธิบาย:

• ใช้ @custom-event.window เพื่อรับ Event ชื่อ custom-event
• ใช้ $event.detail เพื่อเข้าถึงข้อมูลที่ส่งมาพร้อม Event

---

4. การสื่อสารระหว่าง Component

ตัวอย่าง: ส่งข้อความระหว่าง Component

<!-- Component 1 -->
<div x-data>
    <button @click="$dispatch('send-message', { message: 'Hello from Component 1' })">
        Send Message
    </button>
</div>

<!-- Component 2 -->
<div x-data @send-message.window="alert($event.detail.message)">
    <p>Waiting for Message...</p>
</div>

คำอธิบาย:

• Component 1 ส่ง Event send-message
• Component 2 รับ Event และแสดงข้อความจาก $event.detail.message

---

5. การส่ง Event ไปยัง Component หลายตัว

ตัวอย่าง: การ Broadcast Event

<!-- Component 1 -->
<div x-data>
    <button @click="$dispatch('broadcast-event', { message: 'This is a broadcast!' })">
        Broadcast Event
    </button>
</div>

<!-- Component 2 -->
<div x-data @broadcast-event.window="console.log('Component 2:', $event.detail.message)">
    <p>Component 2 is listening...</p>
</div>

<!-- Component 3 -->
<div x-data @broadcast-event.window="console.log('Component 3:', $event.detail.message)">
    <p>Component 3 is listening...</p>
</div>

คำอธิบาย:

• Component 1 ส่ง Event broadcast-event
• Component 2 และ Component 3 รับ Event พร้อมแสดงข้อความใน Console

---

6. การใช้ Event เพื่อเปลี่ยน State

ตัวอย่าง: อัปเดต State ของ Component อื่น

<!-- Component 1 -->
<div x-data>
    <button @click="$dispatch('update-counter', { increment: 1 })">
        Increment Counter
    </button>
</div>

<!-- Component 2 -->
<div x-data="{ counter: 0 }" @update-counter.window="counter += $event.detail.increment">
    <p>Counter: <span x-text="counter"></span></p>
</div>

คำอธิบาย:

• Component 1 ส่ง Event update-counter พร้อมข้อมูล increment: 1
• Component 2 รับ Event และเพิ่มค่าใน State counter

---

7. การใช้งาน Event ซ้อนกัน (Chaining Events)

ตัวอย่าง: ส่ง Event ซ้อนใน Component หลายระดับ

<!-- Parent Component -->
<div x-data>
    <button @click="$dispatch('parent-event', { info: 'Triggered from Parent' })">Trigger Parent Event</button>
    <div x-data @parent-event.window="$dispatch('child-event', { detail: $event.detail.info })">
        <!-- Child Component -->
        <div x-data @child-event.window="alert('Child Event: ' + $event.detail)">
            <p>Listening for Child Event...</p>
        </div>
    </div>
</div>

คำอธิบาย:

• Event parent-event ถูกส่งจาก Parent Component
• Child Component รับ Event และส่งต่อ Event child-event

---

8. การใช้งาน Event กับ Transition

ตัวอย่าง: แสดง/ซ่อนด้วย Event

<!-- Component 1 -->
<div x-data>
    <button @click="$dispatch('toggle-visibility')">Toggle Visibility</button>
</div>

<!-- Component 2 -->
<div x-data="{ isVisible: false }" @toggle-visibility.window="isVisible = !isVisible">
    <div x-show="isVisible" x-transition style="background: lightblue; padding: 10px;">
        <p>This content toggles visibility.</p>
    </div>
</div>

คำอธิบาย:

• Event toggle-visibility ใช้ควบคุมการแสดงผล (isVisible) ของ Component 2

---

9. ข้อควรระวังในการใช้งาน Event Bus

1. การตั้งชื่อ Event:
   • ใช้ชื่อ Event ที่ชัดเจนและสื่อความหมาย เพื่อหลีกเลี่ยงการชนกันของ Event
2. จัดการข้อมูลที่ส่ง:
   • ตรวจสอบข้อมูลใน $event.detail เพื่อหลีกเลี่ยงข้อผิดพลาด
3. หลีกเลี่ยงการใช้ Event ที่ไม่จำเป็น:
   • หาก Component ใช้ State ร่วมกันผ่าน Store (Alpine.store), อาจไม่จำเป็นต้องใช้ Event Bus

---

สรุป

ในบทนี้ คุณได้เรียนรู้การใช้งาน Event Bus ใน Alpine.js สำหรับการสื่อสารระหว่าง Component ตัวอย่างครอบคลุมการส่ง Event, การรับ Event, การใช้ Event ร่วมกับ Transition และการอัปเดต State ผ่าน Event การใช้งาน Event Bus ช่วยเพิ่มความยืดหยุ่นในการพัฒนา Component แบบ Dynamic!