vue2

vue/高阶/project1/src/components/Demo4.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import pubsub from 'pubsub-js';
+// import pubsub from 'pubsub-js';
 export default {
     data() {
         return {
@@ -16,7 +16,8 @@ export default {
     methods:{
         sendMsg() {
             // 发布消息
-            pubsub.publish("part1",this.name)
+            // pubsub.publish("part1",this.name)
+            this.$bus.$emit("part2",this.name)
         }
     }
 

vue/高阶/project1/src/components/Demo5.vue

@@ -5,25 +5,29 @@
 </template>
 
 <script>
-import pubsub from 'pubsub-js';
+// import pubsub from 'pubsub-js';
 export default {
   data() {
     return {
-      msg:""
-    }
+      msg: "",
+    };
   },
   mounted() {
-   this.pid = pubsub.subscribe("part1",(pName,pValue) => {
-      console.log(pName,pValue)
-      this.msg = pValue;
-    })
+    //  this.pid = pubsub.subscribe("part1",(pName,pValue) => {
+    //     console.log(pName,pValue)
+    //     this.msg = pValue;
+    //   })
+    this.$bus.$on("part2", (data) => {
+      console.log(data);
+      this.msg = data;
+    });
   },
   beforeDestroy() {
-    pubsub.unsubscribe(this.pid);
-  }
-}
+    // pubsub.unsubscribe(this.pid);
+    this.$bus.$off("part2");
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
 </style>

vue/高阶/project1/src/main.js

@@ -2,7 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 
 Vue.config.productionTip = false
-
+// 全局挂载事件总线
+Vue.prototype.$bus = new Vue()
 new Vue({
   render: h => h(App),
 }).$mount('#app')