vue中eventBus的使用


eventBus是用於組件間通訊的一種方法,我們都知道在vue中數據流是單向的,那么非父子組件間的傳值自然值得我們注意

一種是我們都很熟悉的vuex;它可以通過倉庫溝通我們所有組件間的通信;而另外還存在一種叫做eventBus的方法:

使用場景如:兄弟組件間的通信,父組件fatherCom中同時使用到childOne和childTwo兩個兄弟組件,點擊子組件childTwo需要另一子組件ChildOne響應;

1.定義eventBus,建立eventBus.js文件,掛載到Vue實例上,暴露出去:  

  import Vue from 'vue';
  let bus = new Vue();
  Vue.prototype.$eventBus = bus;
  export default bus;
 
2.使用到eventBus的兄弟組件都引入eventBus.js:
 
  import eventBUs from '../../utils/eventBus.js'
 
3.子組件childone聲明發布(聲明)事件,通常在mounted或created中聲明:
    
  created() {
     eventBus.$ on('getTarget', target => {
      console.log(target);
     });
   }
 
4.子組件childtwo訂閱(觸發)事件:
 
  methods: {
    addCart( event) {
      eventBus.$emit('getTarget', event.target);
     }
   }
 
 
這就是一個完整的eventBus通信
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM