完成学习事件总线

20_脚手架/vue_code/09.自定义事件/main.js

@@ -13,4 +13,4 @@ new Vue({
         App
     },
     render: h => h(App)
-}).$mount('#app')
+}).$mount('#app')

20_脚手架/vue_code/11.src_全局事件总线/App.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="app">
+    <h1>{{ msg }}</h1>
+    <School/>
+    <Student/>
+  </div>
+</template>
+
+<script>
+import School from "./components/School.vue";
+import Student from "./components/Student.vue";
+
+export default {
+  name: "App",
+  components: {
+    School,
+    Student
+  },
+  data() {
+    return {
+      msg: "Hello:",
+    }
+  }
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 15px
+}
+</style>

20_脚手架/vue_code/11.src_全局事件总线/components/School.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="school">
+    <h2>学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "School",
+  data() {
+    return {
+      name: "修仙学院",
+      address: "长白山",
+    }
+  },
+  mounted() {
+    console.log(this)
+    console.log(this, this.$bus)
+    this.$bus.$on('hello', (data)=>{
+      console.log('这是School组件，收到了数据', data)
+    })
+  },
+  beforeDestroy() {
+    this.$bus.off('hello')
+  }
+}
+</script>
+
+<style scoped>
+.school {
+  background-color: skyblue;
+  padding: 15px
+}
+</style>
+

20_脚手架/vue_code/11.src_全局事件总线/components/Student.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="student">
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+    <button @click="sendStudentName">发送数据给School组件</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Student",
+  data() {
+    return {
+      name: "小强",
+      age: 18
+    }
+  },
+  methods:{
+    sendStudentName() {
+      this.$bus.$emit('hello', this.name)
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.student {
+  background-color: pink;
+  padding: 15px;
+  margin-top: 20px;
+}
+</style>
+

20_脚手架/vue_code/11.src_全局事件总线/main.js

@@ -0,0 +1,19 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')

20_脚手架/vue_code/src/components/School.vue

@@ -14,6 +14,16 @@ export default {
       name: "修仙学院",
       address: "长白山",
     }
+  },
+  mounted() {
+    console.log(this)
+    console.log(this, this.$bus)
+    this.$bus.$on('hello', (data)=>{
+      console.log('这是School组件，收到了数据', data)
+    })
+  },
+  beforeDestroy() {
+    this.$bus.off('hello')
   }
 }
 </script>

20_脚手架/vue_code/src/components/Student.vue

@@ -2,6 +2,7 @@
   <div class="student">
     <h2>学生名称：{{ name }}</h2>
     <h2>学生年龄：{{ age }}</h2>
+    <button @click="sendStudentName">发送数据给School组件</button>
   </div>
 </template>
 
@@ -13,6 +14,11 @@ export default {
       name: "小强",
       age: 18
     }
+  },
+  methods:{
+    sendStudentName() {
+      this.$bus.$emit('hello', this.name)
+    }
   }
 }
 </script>

20_脚手架/vue_code/src/main.js

@@ -12,5 +12,8 @@ new Vue({
     components: {
         App
     },
-    render: h => h(App)
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
 }).$mount('#app')