Vue 全局传参插件PubSubJS使用教程

1.获取并且使用PubSubJS

通过npm安装

npm i pubsub-js

在main.js中导入插件

import PubSub from 'pubsub-js'
Vue.use(PubSub)

2实现PubSubJS的全局传参

ps：如果IDEA没有提示就重启一下

通过publishSync来同步发送消息 以及通过 subscribe来订阅消息

通过侧边栏向传递主区域的组件名称来示范

这是侧边栏的js，上面有个点击事件绑定了getTable方法。可以通过publishSync来传递一个key-value键值对

<script>
import Pubsub from 'pubsub-js'

export default {
  name: 'aside',
  methods:{
    getTable(){
      //key - value
      Pubsub.publishSync("mainName",'Table');
    }
  }
}
</script>

这里是这个方法的源码

 /**
     * Publishes the message synchronously, passing the data to it's subscribers
     * @function
     * @alias publishSync
     * @param { String } message The message to publish
     * @param {} data The data to pass to subscribers
     * @return { Boolean }
     */
    PubSub.publishSync = function( message, data ){
        return publish( message, data, true, PubSub.immediateExceptions );
    };
     function publish( message, data, sync, immediateExceptions ){
        message = (typeof message === 'symbol') ? message.toString() : message;

        var deliver = createDeliveryFunction( message, data, immediateExceptions ),
            hasSubscribers = messageHasSubscribers( message );

        if ( !hasSubscribers ){
            return false;
        }

        if ( sync === true ){
            deliver();
        } else {
            setTimeout( deliver, 0 );
        }
        return true;
    }

可以发现官方的解释是message和data，实际上也可以理解成key和value
还发现createDeliveryFunction( message, data, immediateExceptions )创造了一个新的方法，并且在下面运行了

  function createDeliveryFunction( message, data, immediateExceptions ){
        return function deliverNamespaced(){
            var topic = String( message ),
                position = topic.lastIndexOf( '.' );

            // deliver the message as it is now
            deliverMessage(message, message, data, immediateExceptions);

            // trim the hierarchy and deliver message to each level
            while( position !== -1 ){
                topic = topic.substr( 0, position );
                position = topic.lastIndexOf('.');
                deliverMessage( message, topic, data, immediateExceptions );
            }

            deliverMessage(message, ALL_SUBSCRIBING_MSG, data, immediateExceptions);
        };
    }

deliverMessage
实际上PubSubJS是传递了一个方法到订阅者那边
简写形式是publish，两个函数源码一模一样。

这是主页面的js

<script>
import Aside from "./aside/aside"
import Table from "./table/table"
import Pubsub from "pubsub-js";
export default {
  name: 'index',
  components: {Aside,Table},
  data(){
    return{
      mainName:''
    }
  },
  mounted(){
    Pubsub.subscribe("mainName",(key,value)=>{
       console.log(key,value);
       this.mainName=value;
    })
  }
}
</script>

这里是这个方法的源码

PubSub.subscribe = function( message, func ){
        if ( typeof func !== 'function'){
            return false;
        }

        message = (typeof message === 'symbol') ? message.toString() : message;

        // message is not registered yet
        if ( !Object.prototype.hasOwnProperty.call( messages, message ) ){
            messages[message] = {};
        }

        // forcing token as String, to allow for future expansions without breaking usage
        // and allow for easy use as key names for the 'messages' object
        var token = 'uid_' + String(++lastUid);
        messages[message][token] = func;

        // return token for unsubscribing
        return token;
    };

分析可得第二个参数必须的方法不然返回失败（false）
可以发现实际上接收是message和func，也可以理解成key和value