vue8種通信方式


參考:https://juejin.im/post/5d267dcdf265da1b957081a3#heading-1(寫的很詳細)
     https://blog.csdn.net/songxiugongwang/article/details/84001967

   《vue.js實戰》

本人實際操作:

https://github.com/zhaozhenghao/vue.git

我這邊籠統說一下

1.props/$emit 
概念:父組件通過 props的方式向子組件傳遞數據,而通過 $emit 子組件可以向父組件通信。
2.$children/$parent
概念: 通過 $parent$children就可以訪問組件的實例。
使用 this.$parent查找當前組件的父組件。
使用 this.$children查找當前組件的直接子組件,可以遍歷全部子組件, 需要注意 $children 並不保證順序,也不是響應式的。
3.provide/ inject
概念: provideinject 是 vue2.2.0新增的api, 簡單來說就是父組件中通過 provide來提供變量, 然后再子組件中通過 inject來注入變量。
4.ref/ refs
概念: ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實例,可以通過實例直接調用組件的方法或訪問數據
5.eventBus
概念: eventBus 又稱為事件總線,在vue中可以使用它來作為溝通橋梁的概念, 就像是所有組件共用相同的事件中心,可以向該中心注冊發送事件或接收事件, 所以組件都可以通知其他組件。
6.Vuex
概念:
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化. Vuex 解決了 多個視圖依賴於同一狀態來自不同視圖的行為需要變更同一狀態的問題,將開發者的精力聚焦於數據的更新而不是數據在組件之間的傳遞上。
7.localStorage / sessionStorage
8.attrs/$listeners
概念:是 vue2.4.0引入的該方法,為了解決跨級的組件
  • 使用props綁定來進行一級一級的信息傳遞, 如果D組件中狀態改變需要傳遞數據給A, 使用事件系統一級級往上傳遞
  • 使用eventBus,這種情況下還是比較適合使用, 但是碰到多人合作開發時, 代碼維護性較低, 可讀性也低
  • 使用Vuex來進行數據管理, 但是如果僅僅是傳遞數據, 而不做中間處理,使用Vuex處理感覺有點大材小用了.

 

常見使用場景可以分為三類:

  • 父子組件通信: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners
  • 兄弟組件通信: eventBus ; vuex
  • 跨級通信: eventBus;Vuex;provide / inject$attrs / $listeners


免責聲明!

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



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