vue中的數據傳遞以及事件傳遞(父子組件之間的數據互傳)


每一個組件之間的作用域是孤立的,這意味着組件之間的數據不應該出現引用關系,即使出現了也不允許組件操作組件內部以外的其他數據。vue中,允許向組件內部傳遞props數據,組件內部需要聲明該字段,如下聲明一個child組件:

 

父組件向該組件傳遞數據:

事件傳遞:vue內部實現了一個事件總線系統,即EventBus。EventBus作為溝通橋梁,每一個vue組件實例都繼承了EventBus,都可以接受$on和發送事件$emit。

上面的例子中,如果child.vue向改變parent.vue組件的parentMsg數據,就需要將修改的parentMsg事件傳遞給child.vue,讓child.vue來觸發修改parentMsg事件。如:

父組件:

 

父組件 parent.vue 向子組件 child.vue 傳遞了 updateMsg 事件,在子組件實例化的時候,子組件將 updateMsg 事件使用$on函數注冊到組件內部,需要觸發事件的時候,調用函數this.$emit來觸發事件。

除了父子組件之間的事件傳遞,還可以使用一個 Vue 實例為多層級的父子組件建立數據通信的橋梁,如:

 

 除了$on和$emit以外,事件總線系統還提供了另外兩個方法,$once和$off,所有事件如下:
  $on:監聽、注冊事件。
  $emit:觸發事件。
  $once:注冊事件,僅允許該事件觸發一次,觸發結束后立即移除事件。
  $off:移除事件。

 


免責聲明!

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



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