vue2知识点：消息订阅与发布

文章目录

• ​​3.23消息订阅与发布​​

• ​​3.23.1知识点总结​​
• ​​3.23.2案例​​

• ​​本人其他相关文章链接​​

3.23消息订阅与发布

3.23.1知识点总结

问题：“全局事件总线”和“消息订阅与发布”都可以实现任意组件间通信，那用哪个好？

答案：推荐使用“全局事件总线”，因为它是vue提供的，完全使用的vue技术，而“消息订阅与发布”则是第三方。

3.23.2案例

案例：跟全局事件总线一样，利用“消息订阅与发布”实现平行组件间通信，即学生组件发送数据给学校组件

注意点1：由于“消息订阅与发布”可依赖的第三方太多了，这里使用pubsub-js

注意点2：使用语法

消息订阅语法

import pubsub from 'pubsub-js'

mounted() {
this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
  // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
})
},
beforeDestroy() {
  // this.$bus.$off('hello')
  pubsub.unsubscribe(this.pubId)
}

消息发布语法

import pubsub from 'pubsub-js'

pubsub.publish('hello',666)

注意点3：取消订阅方式和“全局事件总线”不同，取消订阅指定订阅返回的id，且每次返回的id都不同，而“全局事件总线”指定的是“自定义事件名称”

注意点4：订阅回调配置一定要使用箭头函数或者外部定义方法，在订阅中引用也行，千万不要使用普通函数，因为普通函数中this不指代vc，而是undefine，这一点跟“全局事件总线”中的注意点8很像，但还是略有不同

注意点5：消息订阅会接收到2个参数，第1个参数为消息名称，第2个参数才是传递过来的值，如写法1，但是实际msgName参数1他跟用不到它，所以可使用下划线“_”占个位，如写法2

写法1：

this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
  // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
})

写法2：

this.pubId = pubsub.subscribe('hello',(_,data)=>{
  // console.log('有人发布了hello消息，hello消息的回调执行了',_,data)
})

注意点6：箭头函数中的名称(msgName,data)=>{}可以随便写，但是避免使用使用关键字名字

注意点7：如果想传递多个参数，需使用{}
发送方

sendToStudent2(){
  pubsub.publish('hello',{name:this.name, sex:this.sex})
}

接收方

mounted() {
    this.pubId = pubsub.subscribe('hello',(msgName, object)=>{
      console.log('有student1平行组件发布了hello消息，hello消息的回调执行了:',object.name, object.sex)
    })
  }

项目结构

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
  el:'#app',
  render: h => h(App),
})

App.vue

<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <School/>
    <Student/>
  </div>
</template>

<script>
  import Student from './components/Student'
  import School from './components/School'

  export default {
    name:'App',
    components:{School,Student},
    data() {
      return {
        msg:'你好啊！',
      }
    }
  }
</script>

<style scoped>
  .app{
    background-color: gray;
    padding: 5px;
  }
</style>

Student.vue

<template>
  <div class="student">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <button @click="sendStudentName">把学生名给School组件</button>
  </div>
</template>

<script>
  import pubsub from 'pubsub-js'
  export default {
    name:'Student',
    data() {
      return {
        name:'张三',
        sex:'男',
      }
    },
    mounted() {
      // console.log('Student',this.x)
    },
    methods: {
      sendStudentName(){
        // this.$bus.$emit('hello',this.name)
        pubsub.publish('hello',666)
      }
    },
  }
</script>

<style lang="less" scoped>
  .student{
    background-color: pink;
    padding: 5px;
    margin-top: 30px;
  }
</style>

School.vue

<template>
  <div class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
  import pubsub from 'pubsub-js'
  export default {
    name:'School',
    data() {
      return {
        name:'尚硅谷',
        address:'北京',
      }
    },
    mounted() {
      // console.log('School',this)
      /* this.$bus.$on('hello',(data)=>{
        console.log('我是School组件，收到了数据',data)
      }) */
      this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
        console.log(this)
        console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
      })
    },
    beforeDestroy() {
      // this.$bus.$off('hello')
      pubsub.unsubscribe(this.pubId)
    },
  }
</script>

<style scoped>
  .school{
    background-color: skyblue;
    padding: 5px;
  }
</style>

结果展示：