Event Bus & Event Emitter

Event Bus

https://code.luasoftware.com/tutorials/vuejs/parent-call-child-component-method/

webpack & bug

// import EventEmitter from "./event-emitter";

import Vue from 'vue';
// import * as VueEventBus from 'vue';
// import * as VueEventBus from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js';

const log = console.log;

.$emit & .on

OK ???

import Vue from 'vue';
// import * as VueEventBus from 'vue';
// import * as VueEventBus from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js';



// A
      // this.svgEventBus.fire(`update-status-data`);
      this.svgEventBus.$emit(`update-status-data`);

// B
      // this.svgEventBus.on(`update-status-data`, this.updateSVGData);
      this.svgEventBus.$on(`update-status-data`, this.updateSVGData);
    

Event Emitter

https://repl.it/@xgqfrms/EventEmitter-class

OK

fire & on

import EventEmitter from "./event-emitter";

// import Vue from 'vue';
// import * as VueEventBus from 'vue';
// import * as VueEventBus from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js';

const log = console.log;

  data() {
    return {
      // Event Emitter
      svgEventBus: new EventEmitter(),
      // svgEventBus: new VueEventBus(),
      // svgEventBus: new Vue(),
      storeData: {
        status: {
          r: 0,
          x: 0,
          y: 0,
          w: 0,
          h: 0,
        },
      },
      templateData: {},
      seatData: {},
      seatMap: "",
    };
  },

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---