【vue外掛篇】vue-options-events 事件匯流排觸發

vue-options-events （基於事件匯流排的封裝）

安裝

// 安裝
npm i vue-options-events -S

複製程式碼

引用

// 引用(eg. 在工程的main.js下)
import vueOptionsEvents from 'vue-options-events'
Vue.use(vueOptionsEvents)
複製程式碼

Component A

// 使用例子
new Vue({
  methods: {
    show(msg) {
      console.log('show ' + msg);
    }
  },
 
 // events 物件  推薦第一種寫法，es6寫法
  events: {
    hi(msg) {
      console.log(msg);
    },
    // 這裡直接對映到methods中的show函式
    sayHi: 'show'
  }
  
  // events 陣列 第二種寫法，具名函式形式
  events: [
    function hi(msg) {
      console.log(msg);
    },
    'show'  // 去methods中尋找同名函式即可
  ]
});
複製程式碼

Component B

new Vue({
  methods: {
    show(msg) {
      this.$trigger('hi', 'hello');
      // => 'hello'
      
      this.$trigger('sayHi', 'hello');
      // this.$trigger('show', 'hello'); 陣列的話，直接觸發函式名字即可
      // => 'show hello'
    }
  }
});
複製程式碼