[英]Await a grandparent component's method to be resolved in grandchild component
我的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
组件发出“ 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
方法中执行以下步骤:
loading
设置为true handleDialogAccept
完成 loading
设置为false 需要等待吗?
也许可以在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是另一种简单的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.