11

src/App.vue

@@ -1,9 +1,30 @@
 <template>
   <div id="app">
+    <Header id="header" />
     <router-view />
   </div>
 </template>
 
+<script>
+import Header from "@/views/header/index.vue";
+export default {
+  name: "",
+  components: {
+    Header,
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
 <style lang="scss">
 @import "@/assets/scss/index.scss";
+
+#header {
+  width: 100%;
+  height: 74px;
+}
 </style>

src/views/header/index.vue

@@ -31,7 +31,7 @@ export default {
     setActiveIndex(id) {
       if (this.activeIndex !== id) {
         this.activeIndex = id;
-        this.$bus.emit("setActiveIndex", this.activeIndex);
+        this.$bus.$emit("setActiveIndex", this.activeIndex);
       }
     },
   },

src/views/home.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="home">
+  <div id="home"></div>
-    <Header id="header" />
-  </div>
 </template>
 
 <script>
@@ -14,10 +12,13 @@ export default {
   data() {
     return {};
   },
-  mounted() {},
+  mounted() {
+    this.receiveBUS();
+  },
+
   methods: {
     receiveBUS() {
-      this.$bus.on("setActiveIndex", (val) => {
+      this.$bus.$on("setActiveIndex", (val) => {
         console.log("val===>", val);
       });
     },
@@ -29,9 +30,5 @@ export default {
 #home {
   width: 100%;
   height: 100%;
-  #header {
-    width: 100%;
-    height: 74px;
-  }
 }
 </style>