1. 父傳子
首先在使用子組件的標簽上 通過自定義屬性傳遞變量 在子組件中 通過
props
接受
在接收的時候有兩種接收方式 數(shù)組形式 和 對象形式 對象形式可以規(guī)定傳來的變量的數(shù)據(jù)類型(type)默認值(default)以及是否必填(required)
2. 子傳父
首先在使用子組件的標簽上定義一個自定義事件 在子組件里通過 this.emit去調用這個自定義事件emit 方法的第一個參數(shù)是自定義事件的名字 第二個參數(shù)是就是子組件要傳遞給父組件的變量 最后在父組件接收使用就可以了
3. 兄弟組件
利用中央事件總線 eventbus
在 main.js 中 把一個空的 vue 實例掛載在 vue 的原型上起名叫bus傳數(shù)據(jù)的時候用this.bus.emit傳在要接受數(shù)據(jù)的子組件在created
鉤子函數(shù)中用on方法接受
4. 利用 vuex 進行組件通信
把公共的數(shù)據(jù)存在 vuex 里就可以實現(xiàn)組件之間都能使用這個數(shù)據(jù)了
5. v-model 實現(xiàn)組件通信
因為 v-model 就是 :value 和 @input 事件的合寫 如果在一個子組件上使用 v-model 也能實現(xiàn)父子組件之間的通信
6.attr+listener
如果父組件 A 下面有子組件 B 子組件 B 下面又有子組件 C 如果 a 組件的變量和方法想要傳給組件 C 的時候 就用到這個方法 適用于多級組件傳值
在 B 組件中給 C 組件綁定 v-bind="attrs" v-on=listeners" 然后在 C 組件中就可以直接使用 a 傳來的屬性和方法了
(簡單來說:attrs與listeners 是兩個對象樊展,attrs里存放的是父組件綁定的非props屬性,listeners 里存放的是父組件中綁定的非原生事件莽使。)
7. provide 和 inject
父組件通過通過 provide 提供變量 子組件中通過 inject 注入變量拂共,不論嵌套了幾層子組件 都能通過 inject 來調用 provide 的數(shù)據(jù)
- 這種寫法傳的數(shù)據(jù)是不響應的
8. parent和children
在子組件內可以直接通過parent對父組件進行操作,在父組件內可以通過children 對子組件進行操作
在父組件調用子組件時候要加下標也就是$children 是一個數(shù)組 因為可以有很多個子組件