等待祖父母組件的方法在孫組件中解決

Question

我的vue應用程序中包含三個組件：

• 主頁：（Button的祖父母）
• 對話框：（家的孩子/巴頓的父母）
• 按鈕：（家的孫子）

Home組件具有一個異步方法：

async handleDialogAccept() {
  try {
    const response = await this.$axios.get('https://jsonplaceholder.typicode.com/todos/');
    console.log(response.data);
  } catch (err) {
    console.log(err);
  }
},

並且它將在Dialog組件發出“ accept”自定義事件后立即執行：

<dialog-confirmation
  @accept="handleDialogAccept()"
/>

Dialog組件有一個子項（ Button ）：

<button-accept
  v-on="$listeners"
>
  Accept
</button-accept>

在我的buttonAccept.vue ，它被導入到Dialog並如上所示使用，其結構如下：

<template>
  <v-btn
    color="primary"
    @click="handleClick()"
    :loading="loading"
    :disabled="loading"
  >
    <slot name="accept"></slot>
  </v-btn>
</template>

<script>
export default {
  props: ['parentFunction'],
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    handleClick() {
      this.$emit('accept');
    },
  },
};
</script>

我想在handleClick方法中執行以下步驟：

1. 將loading設置為true
2. 發出接受自定義事件
3. 等到handleDialogAccept完成
4. 將loading設置為false

需要等待嗎？

Answer 1

也許可以在Home組件中定義一個變量（ isAcceptDone ），以確定在Button組件中是否完成了異步方法。

Home組件

async handleDialogAccept() {
  try {
    const response = await this.$axios.get('https://jsonplaceholder.typicode.com/todos/');
    console.log(response.data);
    this.isAcceptDone = true;
  } catch (err) {
    console.log(err);
  }
},

Dialog組件

<dialog-confirmation
  @accept="handleDialogAccept()"
  :isAcceptDone="isAcceptDone"
/>

Button組件

<script>
  export default {
    props: ['parentFunction', 'isAcceptDone'],
    data() {
      return {
        loading: false,
      };
    },
    watch: {
      isAcceptDone(val) {
         if(val) {
           this.loading = false
         }
      }
    },
    methods: {
      handleClick() {
        this.$emit('accept');
      },
    }
 };
</script>

另一方面，如果您認為在三個組成部分中傳遞isAcceptDone太復雜了。 使用EventBus是另一種簡單的方法。