From d44d8f0b47ad013c6d16f7b235b1a265506a27dc Mon Sep 17 00:00:00 2001
From: Robert Jefe Lindstaedt <robert.lindstaedt@gmail.com>
Date: Sun, 2 Oct 2016 12:13:26 +0200
Subject: [PATCH] add event bus example to help v1 expectations

This adds an example of how to use similar behavior like with
$broadcast / $dispatch in v1. The motivation comes from not using
vuex immediately for shared state components.
---
 src/api/index.md | 82 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/src/api/index.md b/src/api/index.md
index 39249c2bd6..82bd64188c 100644
--- a/src/api/index.md
+++ b/src/api/index.md
@@ -1092,6 +1092,88 @@ type: api
   // -> "hi"
   ```
 
+  One way of communicating with other components is establishing a lightweight event bus
+  attaching to the `vm.$root`.
+
+  ```html
+  <!-- main.js -->
+  <script>
+  import Vue from 'vue'
+  import App from './App.vue'
+
+  new Vue({ // eslint-disable-line no-new
+    el: '#app',
+    render: (h) => h(App)
+  })
+  </script>
+
+  <!-- App.vue -->
+  <template>
+    <div id="app">
+      <receiver></receiver>
+      <sender></sender>
+    </div>
+  </template>
+
+  <script>
+  import Receiver from './components/receiver.vue'
+  import Sender from './components/sender.vue'
+
+  export default {
+    components: {
+      Receiver,
+      Sender
+    }
+  }
+  </script>
+
+  <style>
+  body {
+    font-family: Helvetica, sans-serif;
+  }
+  </style>
+
+  <!-- components/receiver.vue -->
+  <template lang="html">
+    <div>
+      <h2>Receiver Component</h2>
+      <span>receiveived events from:</span>
+      <ul>
+        <li v-for="(value, index) in mounted_components">{{value}}</li>
+      </ul>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    data () {
+      return {
+        mounted_components: []
+      }
+    },
+    mounted () {
+      this.$root.$on('mounted-a-component', (data) => {
+        console.log('mounted', data);
+        this.mounted_components.push(data)
+      })
+    }
+  }
+  </script>
+
+  <!-- components/sender.vue -->
+  <template lang="html">
+    <h2>Sender Component</h2>
+  </template>
+
+  <script>
+  export default {
+    mounted () {
+      this.$root.$emit('mounted-a-component', 'sender-component')
+    }
+  }
+  </script>
+  ```
+
 <h3 id="vm-once">vm.$once( event, callback )</h3>
 
 - **Arguments:**