Vue筆記（十四）—— Vue eventBus自定義組件間值傳遞

1.新建eventBus.js：

import Vue from 'vue';
export default new Vue();

2.自定義組件引入：

// 引入自定義組件間傳遞依賴js
  import eventBus from '../../static/eventBus.js';

3.聲明/傳值方：

data() {
      return {
        isCollapse: false,
      }
    },
created() {
      eventBus.$emit('initCollapse', this.isCollapse);
    },

4.調用/操作方：

data() {
      return {
        headIsCollapse: true,
      };
    },
created() {
      eventBus.$on('initCollapse', (data) => {
        // 組件傳過來的值
        this.headIsCollapse = data;
      })
    },

問題排查

報錯a.$on is not a function：

1.eventBus引入是否正確；

2.eventBus.js代碼是否正確；

參考

Vue組件通信中eventBus的使用
vue組件通過eventBus通信時，報錯a.$on is not a function