Vue3.0 如何监听子组件的数据加载完成。

Question

业务场景

• 首页有很多个 子模块，首页有下拉刷新的loading，下拉松手时触发refresh，子组件开始加载数据，我需要监听子组件的数据是否全部加载完，如果所有子组件数据加载完成，首页的loading关闭。

我现在写的不起作用，求救 help~

• 父组件：

<template>
    <PulldownRefresh v-model:loading="loading" @refresh="refresh">
        <Child1 ref="child1" />
        <Child2 ref="child2" />
        ...若干个子模块
    </PulldownRefresh>
</template>

...

setup() {
    let child1 = ref();
    let child2 = ref();
    // childN...
    
    let loading = ref(false)
    
    //刷新
    let refresh = () => {
        loading.value = true;
        
        /*等待所有子组件数据加载完*/
        Promise.all([
            child1.value.init(),
            child2.value.init(),
        ])
        .then(() => {
            /*关闭loading*/
            loading.value = false
        })
        .catch(() => {
            loading.value = false
        })
    }
    return {
        refresh,
        child1,
        child2,
        loading,
    }
}
...

• 子组件

<template>
    <List :data="data.list"/>
</template>
......
setup() {
    let data = reactive({
        list:[]
    })
    /*加载数据*/
    let init = () => new Promise((resolve,reject) => {
        loadList()
        .then(res => {
            data.list = res.list;
            resolve(data.list)
        })
        .catch(err => {
            reject(err)
        })
    })
    return {
        init,
        data
    }
}
...

Answer 1

自组件加载完成广播一个事件，父组件侦听事件然后计数，计数够了就关闭 loading。