vue中组件间通信机制之pubsub组件用法

落日映苍穹つ 2022-12-01 05:17 223阅读 0赞

在package.json文件中导入组件依赖：

“pubsub-js”: “^1.9.0”

"dependencies": {
        
        "@jiaminghi/data-view": "^2.9.6",
        "cesium": "^1.70.0",
        "echarts": "^4.8.0",
        "element-ui": "^2.13.1",
        "file-saver": "^2.0.2",
        "jquery": "^3.3.1",
        "ol": "^6.3.1",
        "ol-ext": "^3.1.12",
        "popper.js": "^1.16.1",
        "axios": "^0.19.2",
        "vue": "^2.5.2",
        "vue-cesium": "^2.1.4",
        "vue-layer": "^1.2.0",
        "vue-router": "^3.0.1",
        "vue-runtime-helpers": "^1.1.2",
        "vuex": "^3.2.0",
        "webpack-dev-server": "^2.11.5",
        "xlsx": "^0.16.0",
        "ztree": "3.5.24",
        "pubsub-js": "^1.9.0"
      },

下载pubsub-js组件

npm install
    #或
    cnpm i

vue页面中发布消息用法：  
//发布单个消息

import pubSub from "pubsub-js";
    pubSub.publish("current_xzq", that._current_xzqdm);

//发布多个消息(可在不同的vue页面分别执行单个的发布操作)

//map.vue中执行
    pubSub.publish("current.xzqdm", {
        current:{
        xzqdm:that._current_xzqdm}});
    
    //nd.vue中执行
    pubSub.publish("current.nd", {
        current:{
        nd:that._nd}});

vue页面订阅消息的用法：  
//订阅一个消息

mounted() {
        
      pubSub.subscribe("current_xzq", (msg, current_xzq) => {
        
        this.init_xzqdm(current_xzq);
        alert(current_xzq);
      });
    },

//订阅多个消息

mounted() {
        
      //绑定订阅
      pubSub.subscribe("current", (msg, current) => {
        
        this.init_xzqdm(current.xzqdm,current.nd);
        alert(current.xzqdm+"-"+current.nd);
      });
      //绑定resize事件
      let that = this;
        window.addEventListener(
          "resize",
          () => {
        
            that.echart1.echartObj.resize();
          },
          false
        );
    },

—the—end—