Event Bus का परिचय

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <sender-btn></sender-btn>
  <receiver-box></receiver-box>
</div>
<script>
  const bus = { handlers: {}, on(e, f) { (this.handlers[e] ||= []).push(f); }, emit(e, d) { (this.handlers[e] || []).forEach((f) => f(d)); } };
  const app = Vue.createApp({});
  app.component("sender-btn", { template: '<button @click="send">Send</button>', methods: { send() { bus.emit("msg", "hello bus"); } } });
  app.component("receiver-box", {
    data() { return { last: "nothing yet" }; },
    created() { bus.on("msg", (m) => (this.last = m)); },
    template: "<p>Received: {{ last }}</p>",
  });
  app.mount("#app");
  document.querySelector("button").click();
  Vue.nextTick(() => console.log(document.querySelector("p").textContent));
</script>
</body>
</html>

<!-- Output:
Rendered: SendReceived: hello bus
console: Received: hello bus
-->