Vue組件之間的通信
個人認為Vue組件之間的通信主要歸類為3種：
- 父子組件之間的通信
- 任意兩個組件之間的通信
- 最終的boss，Vuex-狀態管理模式
此次寫一下前兩種通信，后續會單獨寫vuex相關的內容。
父子組件的通信
這種方式的通信是最簡單，下面直接貼代碼
|
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
|
// parent.vue
<template>
<div class="parent">
<p>父親:給你{{ money }}元零花錢</p>
<kid :money=" money" @repay="repay"></kid>
<br>
<button @click="add">那給你加100</button>
<p v-if="back" @repay="repay">兒子：超過300我不要，還給你 {{ back }}元</p>
</div>
</template>
<script>
export default {
name: 'parent',
data () {
return {
money: 100,
back: 0
}
},
components:{ kid },
methods:{
repay (back) {
this.back = back
},
add(){
this.money += 100;
}
}
|
|
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
|
// kid.vue
<template>
<div class="parent">
<p v-if="pocketMoney < 300">兒子: {{ pocketMoney }}太少了，不夠 </p>
<p v-else>兒子: 謝謝老爸！</p>
<button v-if="pocketMoney > 300" @click="repay">點擊有驚喜</button>
</div>
</template>
<script type="text/javascript">
export default {
name: 'kid',
props: {
money: Number
},
data () {
return {
}
},
computed: {
pocketMoney () {
return this.money;
}
},
methods: {
repay () {
this.$emit('repay',this.pocketMoney-300)
}
}
}
</script>
|
這里講了一個小故事，老爸給兒子零花錢，老爸通過props將錢給到兒子，兒子拿到后通過計算屬性得到自己的零花錢，發現太少了，於是老爸多給了兒子，可是兒子只想要300塊去steam上買個游戲，超過300塊后，兒子就發送了一個自定義事件repay，將超過300塊的錢還給老爸，老爸通過監聽repay這個事件的回調里面拿到兒子還給他的錢。
任意兩個組件之間的通信
但是實際當項目逐漸變大，組件之間的層級變多，很多時候非父子間的組件通信也就開始多了，這時候我們就需要另外一種通信方式，官方的叫法global bus。
貼代碼：
|
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
|
// one.vue
<template>
<div>
這是one組件
<button @click="commit">給two組件發送信息</button>
<p> {{ message }}</p>
</div>
</template>
<script type="text/javascript">
import { bus } from './bus'
export default {
name: 'one',
data () {
return {
message: '',
}
},
methods:{
commit () {
bus.$emit('sendMsg',{
msg: '這條信息來自於one'
})
}
},
mounted () {
bus.$on('backMsg', (data) => {
this.message = data.msg;
})
}
}
|
|
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
|
// two.vue
<template>
<div @click="commit">
<p>這是two組件<button @click="commit">給one組件發送信息</button></p>
<p>{{ message }}</p>
</div>
</template>
<script type="text/javascript">
import { bus } from './bus'
export default {
name: 'two',
data () {
return {
message: ''
}
},
methods:{
commit () {
bus.$emit('backMsg',{
msg: '這條信息來自於two'
})
}
},
mounted () {
bus.$on('sendMsg', (data) => {
this.message = data.msg;
})
}
}
</script>
|
最關鍵的bus,卻是最簡單的
|
1
2
3
4
5
6
7
|
// bus.vue
<script>
import Vue from 'vue'
export default {
bus: new Vue(),
}
</script>
|
其實這里就是額外new了一個Vue的實例對象，這個實例什么事情都不干，就收發事件，這里的bus監聽了兩個事件，一個sendMsg,一個backMsg，當bus監聽到one發出sendMsg后，bus就把這個信息告訴two,而當bus監聽到two發出backMsg后，bus就把這個信息告訴one，這就是bus干的事。因為借助於第三者的bus，所以one和two不一定是父子關系，可以是任意兩個甚至多個組件之間的通信。這種通信其實也可以取代父子組件之間的通信，但是平時父子組件的通信，第一種是最方便的，也就沒必要用這種方式了。