全栈工程师出的前端面试题（VUE），你敢来挑战吗？

已知

有2个组件 TestA（以下简写A） 和 TestB（以下简写B），B 是 A 的子组件。

TestA.vue

<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.vue

<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 是未完成的部分。

问

1. 实现 TestA 中 TODO 的效果。
2. 不修改2个组件的 template 的情况下完成(1)⤴️.
3. 尽可能的列出多的解决方案，并比较不同方案的优缺点。

PS：有问题请评论回复。