vue子组件调用父组件方法，如何保证按照顺序执行(promise写的好像有问题)

Question

子组件
`

 save() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        this.$axios
          .post(`/api/wordInfo/updateData.json`, data)
          .then((res) => {
            if (res.success) {
              this.getNature();   
this.$emit("getPassage", this.passageId);
              this.$emit("getSelectText", res.result);
              this.$emit("getMeaning", res.result.word);
              this.$emit("getWord", res.result);
            } else {
              this.$message.error(res.message);
            }
          });
      }
    });
  },

`

子组件的save方法完毕之后 要连续调用三个父组件的方法 由于 getPassage getSelectText getWord getMeaning 这四个方法都是 axios请求，并且需要严格按照顺序执行，切第一个执行完毕之后 第二个执行 第二个执行完毕之后 第三个执行 ...... 不然会影响到页面

开始改成了promise 但是 报错$emit undefined 感觉应该用promise实现 但是写起来好像有问题 求教各位

Answer 1

层层嵌套有点麻烦，你可以这样来做：

// 子组件
...
表单提交成功后：
this.$emit('on-success', {
    passageId: this.passageId,
    result: res.result
})
...


// 父组件
<Child @on-success="handleFormSuccess" />

...
async handleFormSuccess(params) {
    try {
        const passage = await "getPassage" 的请求
        const selectText = await "getSelectText" 的请求
        const meaning = await "getMeaning" 的请求
        const word = await "getWord" 的请求
        
        // 做请求后的逻辑
    } catch (error) {
        // 错误提示
    }
}
...

Answer 2

emit没有返回值，用不了promise，你只能在父组件每个函数内加个回调用来解决顺序执行的问题。
最终代码大概写成这样。

  this.$emit('getPassage', this.passageId, () => {
    this.$emit('getSelectText', res.result, () => {
      this.$emit('getMeaning', res.result.word, () => {
        this.$emit('getWord', res.result);
      });
    });
  });

个人建议你可以在父组件再封装个处理函数，把passageId跟res.result传出去，让父组件直接按顺序处理这一系列的动作