Vue发布订阅消息

本案例我们使用pubsub-js第三方库实现消息的发布订阅。

1、安装pubsub-js

npm i pubsub-js 

2、订阅hello主题的消息

 SchoolCom.vue

<template>
    <div class="demo">
        <h1>学校名字:{
  {name}}</h1>
        <h1>学校地址:{
  {address}}</h1>
        <h1>收到的学生名字:{
  {studentName}}</h1>
    </div>
</template>

import pubsub from "pubsub-js"

export default {
    name: "SchoolCom",
    data: function(){
        return {
            name: "深圳大学",
            address: "深圳",
            studentName: ""
        }
    },
    mounted(){
        //订阅hello主题消息
        this.pubId = pubsub.subscribe("hello", (msgTopicName, data)=>{
            console.log("我是SchoolCom组件收到学生名字：", data);
            this.studentName = data;
        })