轻量事件总线

my-vue-ui-app/src/components/brother.vue

@@ -1,8 +1,10 @@
 <template>
-  <button @click="decrease()">decrease</button>
+  <button @click="decrease()">-</button>
 </template>
 
 <script>
+  import {EventBus} from '@/globalBus';
+
   export default {
     name: "brother",
     data() {
@@ -13,7 +15,7 @@
     },
     methods: {
       decrease() {
-        this.$EventBus.$emit("decreased", {
+        EventBus.$emit("decreased", {
           num: this.num,
           deg: this.deg
         });

my-vue-ui-app/src/components/sister.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
-    <button @click="increment()">increment</button>
+    <button @click="increment()">+</button>
   </div>
 </template>
 
 <script>
+  import {EventBus} from '@/globalBus';
+
   export default {
     name: "sister",
     data() {
@@ -15,7 +17,7 @@
     },
     methods: {
       increment() {
-        this.$EventBus.$emit("incremented", {
+        EventBus.$emit("incremented", {
           num: this.num,
           deg: this.deg
         });

my-vue-ui-app/src/main.js

@@ -4,7 +4,7 @@ import router from './router'
 import store from './store'
 
 Vue.config.productionTip = false
-Vue.prototype.$EventBus = new Vue()
+// Vue.prototype.$EventBus = new Vue()
 
 new Vue({
   router,

my-vue-ui-app/src/views/EmitV.vue

@@ -27,6 +27,7 @@
 <script>
   import Brother from "../components/brother";
   import Sister from "../components/sister";
+  import {EventBus} from '@/globalBus';
 
   export default {
     components: {
@@ -42,14 +43,14 @@
       };
     },
     mounted() {
-      this.$EventBus.$on("incremented", ({num, deg}) => {
+      EventBus.$on("incremented", ({num, deg}) => {
         this.fontCount += num
         this.$nextTick(() => {
           this.backCount += num
           this.degValue += deg;
         })
       });
-      this.$EventBus.$on("decreased", ({num, deg}) => {
+      EventBus.$on("decreased", ({num, deg}) => {
         this.fontCount -= num
         this.$nextTick(() => {
           this.backCount -= num