PubSubJS的使用

最新推荐文章于 2025-07-09 15:08:36 发布

原创最新推荐文章于 2025-07-09 15:08:36 发布 · 5.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#pubsubjs #前端

vue 专栏收录该内容

21 篇文章

订阅专栏

本文档介绍了PubSubJS，一个JavaScript库，用于实现发布/订阅模式。内容包括库的安装、基本语法和操作方法。

文章目录

pubsubjs

一个利用JavaScript进行发布/订阅的库

语法

PubSub.publish('名称', argument)			//发布消息
PubSub.subscrib('名称', (msg,argument) => {} )		//订阅消息
PubSub.unsubscrib('名称')			//取消订阅

操作

安装 pubsub-js

npm install pubsub-js -S //安装

<!-- App父组件 -->
<template>
  <div id="app">
    <Item/>
    <input type="text" v-model='pubsubTest'>
    <button @click='pub'>发布消息</button>
  </div>
</template>

<script>'
  export default {
    name: 'App',
    components: {
      Item			//子组件
    },
    data () {
      return {
        pubsubTest: ''
      }
    },
    methods: {
      pub () {
        let pubsubTest = this.pubsubTest
        PubSub.publish('appData',pubsubTest)		//appDta 是发布名称，pubsubTest 是传递参数
      }
    }
  }
</script>

<!-- Item子组件 -->
<template>
    <div>
        <input type="text" v-model='subTest'>
        <button @click='sub'>订阅消息</button>
      </div>
    </div>
</template>

<script>
  import PubSub from 'pubsub-js'
    export default {
      data () {
        return {
          subTest: ''
        }
      },
      name: "List",
      methods: () {
      	sub () {
          PubSub.subscribe('appData',(msg, pubsubTest) => {		//msg 指'appData'方法， pubsubTest 指传过来的参数
            this.subTest = pubsubTest
            console.log(msg)		//appData
          })
        }
      }
    }
</script>