全局事件总线

my-vue-ui-app/src/App.vue

@@ -6,6 +6,8 @@
       <router-link to="/about">About</router-link>
       |
       <router-link to="/info">Info</router-link>
+      |
+      <router-link to="/emit">Emit</router-link>
     </div>
     <router-view/>
   </div>

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

@@ -0,0 +1,27 @@
+<template>
+  <button @click="decrease()">decrease</button>
+</template>
+
+<script>
+  export default {
+    name: "brother",
+    data() {
+      return {
+        num: 1,
+        deg: 180
+      };
+    },
+    methods: {
+      decrease() {
+        this.$EventBus.$emit("decreased", {
+          num: this.num,
+          deg: this.deg
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <button @click="increment()">increment</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "sister",
+    data() {
+      return {
+        num: 1,
+        deg: 180
+      };
+    },
+    methods: {
+      increment() {
+        this.$EventBus.$emit("incremented", {
+          num: this.num,
+          deg: this.deg
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export const EventBus = new Vue()

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

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

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

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from './views/Home.vue'
+import EmitV from './views/EmitV.vue'
 
 Vue.use(Router)
 
@@ -10,6 +11,10 @@ export default new Router({
       path: '/',
       name: 'home',
       component: Home
+    }, {
+      path: '/emit',
+      name: 'emit-v',
+      component: EmitV
     },
     {
       path: '/about',

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

@@ -0,0 +1,65 @@
+<template>
+  <div id="app">
+    <div class="container" :style="{transform: 'rotateY(' + degValue + 'deg)'}">
+      <div class="front">
+        <div class="increment">
+          <Sister/>
+        </div>
+        <div class="show-front"> {{fontCount}}</div>
+        <div class="decrement">
+          <Brother/>
+        </div>
+      </div>
+
+      <div class="back">
+        <div class="increment">
+          <Sister/>
+        </div>
+        <div class="show-back"> {{backCount}}</div>
+        <div class="decrement">
+          <Brother/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Brother from "../components/brother";
+  import Sister from "../components/sister";
+
+  export default {
+    components: {
+      Sister,
+      Brother
+    },
+    name: "emit-v",
+    data() {
+      return {
+        degValue: 0,
+        fontCount: 0,
+        backCount: 0
+      };
+    },
+    mounted() {
+      this.$EventBus.$on("incremented", ({num, deg}) => {
+        this.fontCount += num
+        this.$nextTick(() => {
+          this.backCount += num
+          this.degValue += deg;
+        })
+      });
+      this.$EventBus.$on("decreased", ({num, deg}) => {
+        this.fontCount -= num
+        this.$nextTick(() => {
+          this.backCount -= num
+          this.degValue -= deg;
+        })
+      });
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

my-vue-ui-app/vue.config.js

@@ -0,0 +1,6 @@
+// vue.config.js
+module.exports = {
+  devServer: {
+    port: 8081,
+  }
+}