有2個組件 TestA(如下簡寫A) 和 TestB(如下簡寫B),B 是 A 的子組件。vue
TestA.vueajax
<template>
<div>
<span>{{ aData }}</span>
<test-b @request-event="ajaxRequest"></test-b>
</div>
</template>
<script>
import TestB from './TestB'
export default {
components: {
TestB
},
data () {
return {
aData: 'A-wait'
}
},
methods: {
ajaxRequest () {
this.mockRequest().then(res => {
// 修改 TestA 的數據
this.aData = res
// TODO: 修改 TestB 組件中 bData 數據的值爲 B-ready
// 處理父組件中其餘業務
this.dealOtherAction()
})
},
dealOtherAction () {
// do other actions
},
mockRequest () {
/**
* 此方法模擬 ajax 請求的延遲
*/
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('A-ready')
}, 3000)
})
}
}
}
</script>
複製代碼
TestB.vuebash
<template>
<div>
<span>{{ bData }}</span>
<button type="button" @click="requestEvent">ClickMe</button>
</div>
</template>
<script>
export default {
name: 'TestB',
data () {
return {
bData: 'B-wait'
}
},
methods: {
requestEvent () {
this.$emit('request-event')
}
}
}
</script>
複製代碼
B 組件中有一個按鈕能夠觸發 A 組件發送異步請求,在請求的回調中按順序處理一些邏輯(修改 A 中數據 -> 修改 B 中數據 -> 繼續 A 組件其餘邏輯),TODO 是未完成的部分。異步
PS:有問題請評論回覆。ui