0

我的 vue 应用程序中有三个组件：

  • 家：（巴顿的祖父母）
  • 对话框：（家庭的孩子/按钮的父母）
  • 按钮：（家的孙子）

该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组件发出“接受”自定义事件，它将立即执行：

<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为真
  2. 发出接受自定义事件
  3. 等到handleDialogAccept完成
  4. 设置loading为假

需要等待吗？

4

1 回答 1

2

也许，您可以在组件中定义一个变量（isAcceptDone）Home来确定组件中的异步方法是否完成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 是另一种简单的方法。

于 2019-06-14T02:14:59.133 回答