vue2

8.vue/高阶/project2/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "pubsub-js": "^1.9.5",
         "vue": "^2.6.14"
       },
       "devDependencies": {
@@ -9540,6 +9541,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/pubsub-js": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.9.5.tgz",
+      "integrity": "sha512-5MZ0I9i5JWVO7SizvOviKvZU2qaBbl2KQX150FAA+fJBwYpwOUId7aNygURWSdPzlsA/xZ/InUKXqBbzM0czTA==",
+      "license": "MIT"
+    },
     "node_modules/pump": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.2.tgz",

8.vue/高阶/project2/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "pubsub-js": "^1.9.5",
     "vue": "^2.6.14"
   },
   "devDependencies": {

8.vue/高阶/project2/src/App.vue

@@ -3,7 +3,10 @@
     <h1>
       APP
       <Demo1 ref="aaa"></Demo1>
-      <Demo2  :age1="3"></Demo2>
+      <Demo2 :age1="3"></Demo2>
+      <Demo3 @getName="getName1"></Demo3>
+      <Demo4></Demo4>
+      <Demo5></Demo5>
     </h1>
   </div>
 </template>
@@ -11,14 +14,23 @@
 <script>
 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 {
   components: {
     Demo1,
-    Demo2
+    Demo2,
+    Demo3,
+    Demo4,
+    Demo5
   },
   methods:{
     getMain() {
       console.log("端午节")
+    },
+    getName1(name) {
+      console.log("你好" + name)
     }
   },
   mounted() {

8.vue/高阶/project2/src/components/Demo2.vue

@@ -18,7 +18,7 @@ export default {
     props: {
         name: {
             type: String,
-            required: true,
+            required: false,
             default:"你好"
         },
         age1:{
@@ -33,6 +33,6 @@ export default {
     div {
         width: 80%;
         height: 200px;
-        border: 1px solid #f00;
+        border: 3px solid #ff0;
     }
 </style>

8.vue/高阶/project2/src/components/Demo3.vue

@@ -0,0 +1,32 @@
+
+<template>
+  <div>
+    <h2>Demo3</h2>
+    <button @click="sendName">触发父亲事件</button>
+    <!-- <p>我叫{{ name }},今年{{ age1 }}岁了</p> -->
+  </div>
+</template>
+  
+  <script>
+export default {
+    data() {
+        return {
+            name1:"我有一个帽衫"
+        }
+    },
+    methods:{
+        sendName() {
+            console.log("12121")
+            this.$emit("getName",this.name1)
+        }
+    }
+};
+</script>
+  
+  <style scoped>
+div {
+  width: 80%;
+  height: 200px;
+  border: 1px solid #f00;
+}
+</style>

8.vue/高阶/project2/src/components/Demo4.vue

@@ -0,0 +1,35 @@
+
+<template>
+  <div>
+    <h2>Demo4</h2>
+  </div>
+</template>
+    
+<script>
+// 发布订阅
+import pubsub from 'pubsub-js';
+export default {
+    mounted() {
+        // 发布
+      this.pubId =  pubsub.subscribe("part1",this.weather)
+    },
+    methods:{
+        weather(name1,address) {
+            console.log(name1,address)
+            console.log('今天30度'+ address)
+        }
+    },
+    // 取消订阅
+    beforeDestoryed() {
+        pubsub.unsubscribe(this.pubId)
+    }
+};
+</script>
+    
+    <style scoped>
+div {
+  width: 80%;
+  height: 200px;
+  border: 2px solid purple;
+}
+</style>

8.vue/高阶/project2/src/components/Demo5.vue

@@ -0,0 +1,27 @@
+
+<template>
+  <div>
+    <h2>Demo5</h2>
+    <button @click='getMsg'>获取demo4的信息</button>
+  </div>
+</template>
+      
+<script>
+import pubsub from 'pubsub-js';
+export default {
+    methods:{
+        getMsg() {
+            // 订阅
+            pubsub.publish('part1','哈尔滨')
+        }
+    }
+};
+</script>
+      
+      <style scoped>
+div {
+  width: 80%;
+  height: 200px;
+  border: 2px solid pink;
+}
+</style>