vue 都是組件化的開發模式.
整個組件樹中,組件和組件之間的關系如下圖所示.
父子組件傳值壹般用 props & events 即可.
但是非父子組件之間,如何傳值會有很多的解決方案.
壹般都建議使用 vuex 官方提供的集中式狀態管理工具.
但此方案有可能過於笨重,寫起來也並不方便,還需要專門引入 vuex 庫,增大項目的打包體積.
使用 store 模式來解決組件間數據狀態***享的問題.
store 模式的核心很簡單:
定義壹個很簡單的全局單例對象,此提供壹些數據,在組件間***享.
將此對象定義在需要使用到的組件,並設置在 data 屬性上即可.
A 組件需要使用.
B 組件需要使用.
效果:
總結:
第二種,使用壹個 new Vue 實例,去承載***享數據的功能. 實例內部的 methods , computed , watch 等,可以用於對數的監視和控制.
在 A 組件上使用
在 B 組件上使用
效果:
總結:
碼雲地址