vue中组件间通信机制之pubsub组件用法-蒲公英云

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

在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
    );
},