Vue之组件通信之消息订阅与发布（039）

Vue之组件通信之消息订阅与发布

一、安装 pubsub-js
npm i pubsub-js
二、新建两个组件 VcA,VcB,并导入pubsub
A发布，B订阅

<template>
  <div class="vca">
    <h1>VcA</h1>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'

export default {
  name: "vca",
  methods: {
    sendMessage() {
      pubsub.publish("message", "I love world");
    }
  }
}
</script>

<style scoped>
.vca {
  background: aqua;
  width: 50%
}
</style>

pubsub.publish(“message”, “I love world”);
参数1消息名，参数2发布数据

<template>
  <div CLASS="vcb">
    <h1>VcB</h1>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'

export default {
  name: "VcB",
  data() {
    return {
      message: ''
    }
  },
  mounted() {
   this.pubId = pubsub.subscribe("message", (messageName, msg) => {
        this.message = msg;
    })
  },
 
}
</script>

<style scoped>
.vcb {
  background: cornflowerblue;
  width:50%;
}
</style>

mounted() {
this.pubId = pubsub.subscribe(“message”, (messageName, msg) => {
this.message = msg;
})
},
订阅回调事件里参数1是消息名，参数2是消息内容。
beforeDestroy() {
pubsub.unsubscribe(this.pubId)
}
记着取消订阅
三、运行效果

能实现发布与订阅的类库很多。