Vue.js中的組件通信
注意:組件通信， 無論效果是如何的， Vue都是單向數據流（組件之間的數據通信）
Vue.js中組件通信一共分為四種:
父子組件通信
子父組件通信
非父子組件通信
多組件狀態共享
下面一一介紹:
父子組件通信
綁定的是簡單數據類型:
父組件中定義數據， 通過單向數據綁定的形式， 將數據綁定在子組件身上， 屬性是自定義屬性
子組件通過配置項中的props接收數據， props可以是一個數組，數組中放的是自定義屬性名稱
那么這個自定義屬性可以向data中的數據一樣直接在子組件模板中使用
父組件中數據一旦修改， 子組件數據就會修改， 那么這也就是單項數據流
結構:
I AM FATHER
i am son
我爸這個月給我了{{ money }}元
子父通信
綁定了復雜的數據類型：
父組件中的數據是一復雜數據類型， 那么父組件綁定數據的時候， 給子組件的是一個引用地址
子組件可以通過這個引用地址， 修改這個數據
效果上像， 子組件和父組件通信了， 違背單項數據流
父組件可以傳遞一個方法給子組件：
父組件定義方法， 然后將這個方法通過單向數據綁定的形式傳遞給子組件
子組件通過props屬性接收， 然后通過 @click = "方法名"
通過自定義事件來實現通信：
父組件中定義 數據 和 方法（方法時用來操作數據的)
在子組件身上綁定自定義事件
子組件定義方法， 在這個方法中通過 this.$emit(eventType,實際參數) 來調用自定義事件的事件處理程序
結構：
I 'm king
國庫里現在有{{ gk }}元
I 'm king
國庫里現在有{{ gk }}元
1
2
3
4
5
6
7
8
9
10
11
12
//步驟1,父組件中定義數據和方法,gk,getMoney Vue.component('King',{ template:'#king', data(){ return { gk:0 } }, methods:{ getMoney(value){ this.gk+=value; } } }) //步驟3,子組件定義方法,這個方法中通過方法中通過 this.$emit(eventType,實際參數)觸發了步驟2的自定義事件 Vue.component('People',{ template:'#people', data(){ return { money:2000 } }, methods:{ giveMoney(){ this.$emit('getmoney',this.money/2) } } }) new Vue({ el:'#app' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
非父子通信
使用ref來綁定組件， （注意：ref也可以綁定DOM元素） 【ref鏈】
在父組件的模板中， 使用ref = refName 綁定在兩個兄弟組件身上
在任意一個子組件中， 就可以通過 this.$parent.$refs.refName 就可以獲得另一個子組件了， 同時這個自組件身上的數據和方法同樣也得到了
結構：
我是父親
你好
I am boy
我現在有：{{ cash }} 錢
I am girl
Vue.component('Father',{ template: '#father', data () { return { name: 'father' } } }) Vue.component('Boy',{ template: '#boy', data () { return { cash: 2000 } }, methods: { incrementCash (value) { this.cash += value } } }) Vue.component('Girl',{ template: '#girl', data () { return { money: 1000 } }, methods: { give(){ console.log('===================================='); console.log(this.$parent); console.log('===================================='); // console.log( this.$parent.$refs ) // { body: Vuecomponent,girl: VueComponent } this.$parent.$refs.boy.incrementCash( this.money ) // this.$parent.$children } } }) new Vue({ el: '#app' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
通過事件總線（bus）
它是通過事件的發布（聲明）， 以及事件的訂閱（觸發）來做的
首先在js中 創建一個bus對象（vm）
var bus = new Vue()
在Boy組件中定義數據， 和修改數據的方法
在Boy組件中 通過 created 鉤子 ， 進行bus事件的發布
注意:參數傳遞問題實參寫在 bus.$emit('add',1000)
created: { bus.$on('add',this.addCount) }
1
2
在MyButton組件的方法中通過 bus進行事件的訂閱
結構：
I 'm boy
我現在有{{ cash }}元
I 'm girl
/* 1.它是通過事件的發布（聲明）， 以及事件的訂閱（觸發）來做的 2.首先在js中 創建一個bus對象（vm） 3.在Boy組件中定義數據， 和修改數據的方法 4.在Boy組件中 通過 created 鉤子 ， 進行bus事件的發布 注意:參數傳遞問題實參寫在 bus.$emit('add',1000) */ let bus=new Vue(); Vue.component('Boy',{ template:'#boy', data(){ return { cash:0 } }, methods:{ getMoney(value){ this.cash+=value; } }, created(){ bus.$on('add',this.getMoney) } }) Vue.component('Girl',{ template:'#girl', methods:{ giveMoney(){ bus.$emit('add',1000) } } }) new Vue({ el:'#app' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
多組件狀態共享
javaScript Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
