Vue.js发布订阅模式学习-尚硅谷

Vue.js发布订阅模式学习-尚硅谷

使用这个模式需要一个第三方库，
安装要在cmd命令窗口中,使用管理员模式打开去安装，防止安装失败。

npm i pubsub-js

pubsub:
pub：‘publish 意思是发布’
sub: 'subscribe’意思是订阅

示例：学生发布信息，学校去订阅（不要想那么多，这就是一个场景）
步骤：1 引入这个第三方库
2 学生去发布信息
3 学校去订阅信息

在Student.vue中:

<template>
 <div class="student">
   <h1>{{msg}}</h1>
   <button @click="StudentNameForSchool()">把学生名给学校</button>
 </div>
</template>
<script>
// 1 导入第三方的库
import pubsub from 'pubsub-js'

export default {
 name: 'HelloWorld',
 data(){
   return{
     msg:'欢迎来到学生页面',
   }
 },
 methods:{
   StudentNameForSchool(){
     // 2 发布学生信息
     pubsub.publish('studentName','zebra')
   }
 },
}
</script>
<style scoped>
.student{
 background-color: pink;
}
</style>

在School.vue中

<template>
  <div class="school">
    <h1>{{msg}}</h1>
  </div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
  name: 'School',
  data(){
    return{
      msg:'欢迎来到学校页面',
    }
  },
  mounted(){
   // 3  订阅信息， 返回值是一个id值， pubsub.subscribe的参数中 逗号前面的是订阅的新闻名， 逗号后面的第一个参数是
   // 订阅的新闻名，第二个是学校接受的学生发的新闻的内容
   this.pubId = pubsub.subscribe('studentName',(messageName,data)=>{
       console.log("订阅到了学生发过来的信息",messageName,data)
     })
  },
  beforeDestroy() {
    pubsub.unsubsribe(this.pubId)
  },
}
</script>
<style scoped>
 .school{
   background-color: grey;
 }
</style>