vue2

vue/高阶/project1/package.json

@@ -19,6 +19,7 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "pubsub-js": "^1.9.5",
     "sass": "^1.100.0",
     "sass-loader": "^17.0.0",
     "scss": "^0.2.4",

vue/高阶/project1/src/App.vue

@@ -7,6 +7,12 @@
      <Demo2 name="aa" :age="3" :dd="xxx"></Demo2>
      <hr>
      <Demo3 @getXX="getThing"></Demo3>
+     <hr>
+     <Demo4></Demo4>
+     <hr>
+     <hr>
+     <Demo5 v-if="isShow"></Demo5>
+     <button @click="isShow = !isShow">销毁demo5</button>
   </div>
 </template>
 
@@ -15,17 +21,22 @@
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
+import Demo4 from './components/Demo4.vue';
+import Demo5 from './components/Demo5.vue';
 export default {
     data() {
         return {
-          xxx:"你好"
+          xxx:"你好",
+          isShow: true
         }
     },
   // 2.组件的注册
   components:{
     Demo1,
     Demo2,
-    Demo3
+    Demo3,
+    Demo4,
+    Demo5
   },
   methods:{
     aa() {

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="demo4">
+    <h1>第四个组件</h1>
+    <button @click="sendMsg">发布消息</button>
+  </div>
+</template>
+
+<script>
+import pubsub from 'pubsub-js';
+export default {
+    data() {
+        return {
+            name:"图图"
+        }
+    },
+    methods:{
+        sendMsg() {
+            // 发布消息
+            pubsub.publish("part1",this.name)
+        }
+    }
+
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="demo5">
+    <h1>第五个组件:{{ msg }}</h1>
+  </div>
+</template>
+
+<script>
+import pubsub from 'pubsub-js';
+export default {
+  data() {
+    return {
+      msg:""
+    }
+  },
+  mounted() {
+   this.pid = pubsub.subscribe("part1",(pName,pValue) => {
+      console.log(pName,pValue)
+      this.msg = pValue;
+    })
+  },
+  beforeDestroy() {
+    pubsub.unsubscribe(this.pid);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

vue/高阶/project1/yarn.lock

@@ -5033,6 +5033,11 @@ pseudomap@^1.0.2:
   resolved "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
 
+pubsub-js@^1.9.5:
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/pubsub-js/-/pubsub-js-1.9.5.tgz#e9264ef8c7aa4c2510010ebb75bfd54cdcb7b148"
+  integrity sha512-5MZ0I9i5JWVO7SizvOviKvZU2qaBbl2KQX150FAA+fJBwYpwOUId7aNygURWSdPzlsA/xZ/InUKXqBbzM0czTA==
+
 pump@^3.0.0:
   version "3.0.4"
   resolved "https://registry.npmmirror.com/pump/-/pump-3.0.4.tgz#1f313430527fa8b905622ebd22fe1444e757ab3c"