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

Lambo
  • 313

业务场景

  • 首页有很多个 子模块,首页有下拉刷新的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
    }
}
...
回复
阅读 1.3k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏