vue

vue/vue高阶/comm/package.json

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

vue/vue高阶/comm/src/App.vue

@@ -3,12 +3,27 @@
     <h1>组件通信</h1>
     <Demo1 ref="getMain"></Demo1>
     <hr>
-    <Demo2 :name="a" :age="10"></Demo2>
+    <Demo2 :name="a" sex="女" :age="10"></Demo2>
+    <hr>
+    <Demo3 @getName="getName"></Demo3>
+    <hr>
+    <Demo4></Demo4>
+    <hr>
+    <Demo5></Demo5>
+    <hr>
+    <Demo6></Demo6>
+    <hr>
+    <Demo7></Demo7>
   </div>
 </template>
 <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'
+  import Demo6 from './components/Demo6.vue'
+  import Demo7 from './components/Demo7.vue'
   export default {
     data() {
       return {
@@ -18,11 +33,19 @@
     },
     components:{
       Demo1,
-      Demo2
+      Demo2,
+      Demo3,
+      Demo4,
+      Demo5,
+      Demo6,
+      Demo7
     },
     methods:{
       ab() {
         console.log("明天休息",this.msg);
+      },
+      getName(name) {
+        console.log("我叫"+name)
       }
     },
     mounted() {

vue/vue高阶/comm/src/components/Demo3.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="demo1">
+    组件三：自定义事件总线
+    <button v-on:click="send">这里是demo3</button>
+    <button @click="cancel">失效</button>
+   </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      aa:"小花"
+    }
+  },
+  methods:{
+    send() {
+      this.$emit("getName",this.aa)
+    },
+    cancel() {
+      // 全部解绑
+      this.$off();
+      // 指定解绑 => 单一
+      // this.$off("getName")
+      // 解绑多个
+      // this.$off(['getName','xxx'])
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="demo">
+    组件四:全局事件总线
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.$bus.$on("part1",this.demo1)
+  },
+  methods:{
+    demo1(weather) {
+      console.log("今天是" + weather)
+    }
+  },
+  destroyed() {
+    this.$bus.$off()
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="demo">
+    组件五：全局事件总线
+    <button @click="getWeather">获取节气</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      aa: '夏至'
+    }
+  },
+  methods:{
+    getWeather() {
+      this.$bus.$emit('part1',this.aa)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

vue/vue高阶/comm/src/components/Demo6.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="demo">
+    组件六:pubsub-js
+    <!--  npm install pubsub-js -->
+  </div>
+</template>
+
+<script>
+import pubsub from 'pubsub-js'
+export default {
+  data() {
+    return {
+      pubId:''
+    }
+  },
+  // 1.引入
+  mounted() {
+    // 绑定
+  this.pubId = pubsub.subscribe("part1",this.demo1)
+    // this.$bus.$on("part1",this.demo1)
+  },
+  methods:{
+    demo1(name,weather) {
+      console.log("今天是" + weather)
+    }
+  },
+  destroyed() {
+    // 解绑
+    pubsub.unsubscribe(this.pubId)
+    // this.$bus.$off()
+  }
+}
+</script>
+
+<style>
+
+</style>

vue/vue高阶/comm/src/components/Demo7.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="demo">
+    组件七:pubsub-js
+    <button @click="getWeather">获取节气</button>
+  </div>
+</template>
+
+<script>
+import pubsub from 'pubsub-js'
+export default {
+  data() {
+    return {
+      aa: '夏至'
+    }
+  },
+  methods:{
+    getWeather() {
+      // 监听
+      pubsub.publish('part1',this.aa)
+      // this.$bus.$emit('part1',this.aa)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -5,4 +5,8 @@ Vue.config.productionTip = false
 
 new Vue({
   render: h => h(App),
+  beforeCreate() {
+    
+  Vue.prototype.$bus = this
+  },
 }).$mount('#app')

vue/vue高阶/comm/yarn.lock

@@ -5019,6 +5019,11 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
 
+pubsub-js@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.npmmirror.com/pubsub-js/-/pubsub-js-1.9.4.tgz#5c8678600e34e95b1269e96c17e1b51dab3ecb5a"
+  integrity sha512-hJYpaDvPH4w8ZX/0Fdf9ma1AwRgU353GfbaVfPjfJQf1KxZ2iHaHl3fAUw1qlJIR5dr4F3RzjGaWohYUEyoh7A==
+
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"