Vue父子组件数据接口调用问题

贝加Li
  • 52

开发B端产品表格功能中:

父组件查询条件中引用了一个子组件,该子组件是级联查询省市县功能。现在有一个问题:在父组件加载页面时,通过ref获取子组件中的当前用户所属省市县代码(任意一级),然后去查询列表。但是每次不能及时获取到子组件数据。之前整体研究过Vue的生命周期,改为mounted中执行查询方法。但还是会有这个问题,加载页面时不能及时拿到子组件中的省市县数据?

请问最好的解决办法是什么呢?
这个原因大家可以帮忙分析一下吗?不确定是否本人理解有误~谢谢~~

回复
阅读 1.3k
3 个回答

在父组件加载时就获取子组件数据这比较奇怪;一般应该是用户的一些操作之后才需获取子组件数据。

然后你这个问题是否可以把查询方法传给子组件,在子组件中省市县的数据获取到之后再使用$emit执行传过来的查询方法

caoxiaoui
  • 5
新手上路,请多包涵
// 子组件
    methods: {
        childMethod () {
            return new Promise((resolve) => {
                setTimeout(() =>{
                    console.log('子组件log')
                    resolve('childMethod调用成功')
                },2000)
            })
        }
    }
// 父组件
    created() {
        this.$nextTick(()=> {
            Promise.all([this.$refs['child'].childMethod()]).then((data) => {
                console.log('父组件调用:子组件传值为' + data)
                // TODO
            })
        })
    }

父组件加载时需要获取子组件的数据其实可以让数据自己从子组件中传出来。在子组件中的watch对象中监听父组件传过来的数据,监听这个数据使用immediate: true,并给handler设置一个回调方法然后将子组件需要传的值传给父组件。immediate设为true是让子组件首次加载时立刻执行handler的方法。

宣传栏