日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

消息的訂閱與發(fā)布機(jī)制

作者:南瓜骨頭 更新時(shí)間: 2023-11-25 編程語言

消息的訂閱與發(fā)布機(jī)制

在這里插入圖片描述

  • 功能:可完成任意組件之間數(shù)據(jù)的傳遞(同全局事件總線功能一樣)
  • 區(qū)別:與全局事件總線相比,消息的訂閱和發(fā)布機(jī)制需要使用第三方庫。我用的是pubsub-js庫,其他的第三方庫也可以使用,沒有具體的限制。
  • pubsub-js可以在任何前端框架上使用
  • 在這個(gè)庫中,有兩個(gè)屬性可以幫助完成消息的訂閱和發(fā)布機(jī)制,分別是:subscribe(訂閱)和publish(發(fā)布)

pubsub-js第三方庫的安裝與使用

  • 安裝方法
    • 第一步:打開CMD窗口,將現(xiàn)在的文件路徑轉(zhuǎn)成Vue框架安裝的文件路徑
    • 第二步:在窗口中輸入:npm i pubsub-js,回車即可開始安裝,出現(xiàn)added 1 package in 2m代表安裝完成
  • 在程序中引入pubsub-js:就跟引入組件一樣,在<script></script>中添加import pubsub from 'pubsub-js'

如何使用?

<template>
    <div></div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name : 'App',
        mounted(){
            this.pid = pubsub.subscribe('zhangsan', function(name, sex){
                console.log(name);
                console.log(sex);
            })
        },
        // 銷毀前將訂閱解除
        beforeDestroy(){
            pubsub.unsubscribe(this.pid)
        }
    }
</script>
<template>
    <div>
        <button @click="person">張三</button>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name : 'User',
        methods : {
            person(){
                pubsub.publish('zhangsan', '男')
            }
        }
    }
</script>

原文鏈接:https://blog.csdn.net/weixin_47957908/article/details/134155184

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新