vue 帮顶完动态组件之后调用动态组件的方法？

Question

home页面，通过请求的数据去来显示页面，所以通过for循环通过:is动态绑定控件，当我在父控件点击调取方法的时候，我需要时我需要怎么去调用方法？请指教，谢谢

我通过使用ref的方式去调用这个空间下的方法，但是返现不能调用，总是说方法未定义之类的。

相关代码

        <scroller
        :ref="refs.scroller"
        lock-x
        :scrollbar-y="false"
        @on-scroll="scrollHandler"
        :height="scrollerHeight + `px`"
        :bounce="true"
        use-pulldown
        @on-pulldown-loading="refreshHandler"
        use-pullup
        @on-pullup-loading="loadMore"
        v-model="status"
    >
        <div class="box" style="overflow: hidden">
            <div
                v-for="(item, index) in modules"
                :key="index"
                :is="item.type"
                :ref="item.type"
                module-config-location="home"
                :module-config-id="item.id"
                :module-config-title="item.title"
                :module-config-title-color1="item.titleColor1"
                :module-config-title-color2="item.titleColor2"
                :module-config-class="item.clasz"
                :module-config-bg-img="item.bgImg"
            ></div>
        </div>
        </scroller>
        
        调用方法：
        loadMore(){
        console.log('home load more ' , this.$refs);
        this.$refs.GpRecommend.loadMo1("hello");
        //this.$refs['gp-recommend'].loadMo1("hello");
        // this.reload();
        }
        
        在子空间中的方法定义是
        loadMo1(msg){
            console.log("加载更多");
        }

我打印的refs里面东西：

之后使用this.$refs['gp-recommend'].loadMo1 或者 this.$refs.GpRecommend.loadMo1 都不能成功。
想知道这种情况是怎么调用的？谢谢

Answer 1

打印了一下：

    loadMore(){
        //渲染完成
        this.$nextTick(() => {
            console.log(this.$refs['gp-recommend']);
            this.$refs['gp-recommend'][0].loadMo1("hello");
            // this.$refs['GpRecommend'].loadMo1("hello");
        })
        // this.reload();
    }
    
    
    

所以我们看到的调用方式是：
this.$refs'gp-recommend'.loadMo1("hello");
而不是直接使用
this.$refs['gp-recommend'].loadMo1("hello");这样是不能直接调用方法的。