概念

1. 消息订阅与发布也是一种组件间通信的技术。
2. 这里的消息实质就是数据，是组件间需要传递的数据。
3. 通常我们将需要数据的组件称为订阅数据组件，提供数据的组件称为发布数据组件。
4. 下面将借助 pubsub-js 包完成消息订阅与发布，下面代码以学生组件向学校组件传数据为例，学生组件时发布数据组件，学校组件是订阅数据组件。

安装 pubsub-js

npm i pubsub-js

引入 pubsub

1. 在订阅数据组件和发布数据组件中都要用到 pubsub，在这两种组件顶部引入 pubsub 即可。

2. 引入语法

   import pubsub from 'pubsub-js';

3. 引入的 pubsub 是一个对象，它内部包含订阅、发布、销毁等方法。

订阅消息

1. 每次订阅消息时，都会生成一个消息的 id，通常情况下会把这个 id 放在组件实例对象中，方便后期销毁消息工作。

2. 订阅消息是在 mounted() 生命周期 中完成的。

3. 订阅消息方法：pubsub.subscribe(参数1, 参数2)

   1. 参数1：是一个函数名，也可以理解为订阅消息的标题、类型等。
   2. 参数2：是一个回调函数，用来处理数据。这个回调函数也有两个参数，第一个参数表示订阅标题，第二个参数才是传递的数据。这里考虑到 this 的指向问题，回调函数写成箭头函数。

4. School.vue

   <template>
       <div class="box back">
           <h5>学校名称：{{name}}</h5>
           <h5>学校地址：{{address}}</h5>
       </div>
   </template>
   
   <script>
       import pubsub from 'pubsub-js';
   
       export default {
           name: 'School',
           data(){
               return {
                   name: '内蒙古农业大学',
                   address: '内蒙古呼和浩特'
               }
           },
           mounted() {
               this.pubId = pubsub.subscribe('getData',(msg,data) => {
                   console.log(`我是 School 组件，我接到的数据是：${data}`);
               })
           },
       }
   </script>

发布消息

1. 发布消息通常是由某个事件触发的。

2. 发布消息方法：pubsub.publish(参数1,参数2)

   1. 参数1：消息的标题，要与订阅消息方法的第一个参数对应。
   2. 参数2：数据。

3. Student.vue

   <template>
       <div class="box back">
           <h5>学生姓名：{{name}}</h5>
           <h5>学生性别：{{sex}}</h5>
           <h5>学生年龄：{{age}}</h5>
           <button @click="sendData">发射数据</button>
       </div>
   </template>
   
   <script>
       import pubsub from 'pubsub-js';
   
       export default {
           name: 'Student',
           data(){
               return {
                   name: 'SevenOne',
                   sex: '男',
                   age: 21,
               }
           },
           methods: {
               sendData(){
                   pubsub.publish('getData',this.name)
               }
           },
       }
   </script>

销毁消息

1. 我们在订阅消息时，将订阅消息的 id 存放在了组件实例对象 this 中，接下来的销毁工作回用到它。

2. 销毁消息通常会写在 beforeDestroy() 生命周期 里。

3. 销毁方法：pubsub.subscribe(订阅时产生的 id)

4. School.vue

   <script>
       import pubsub from 'pubsub-js';
   
       export default {
           name: 'School',
           data(){
               return {
                   name: '内蒙古农业大学',
                   address: '内蒙古呼和浩特'
               }
           },
           mounted() {
               this.pubId = pubsub.subscribe('getData',(msg,data) => {
                   console.log(`我是 School 组件，我接到的数据是：${data}`);
               })
           },
           beforeDestroy() {
               pubsub.subscribe(this.pubId);
           },
       }
   </script>