參考: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 並不保證順序,也不是響應式的。
使用 this.$children查找當前組件的直接子組件,可以遍歷全部子組件, 需要注意 $children 並不保證順序,也不是響應式的。
3.provide/ inject
概念:
provide/
inject 是
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
