javascript - 动态组件添加ref的问题

问题描述

问 题

需求：

有一组动态组件，为其添加ref。希望通过$refs标记引用组件中的变量和方法。

在子组件中，有：

<div v-for=(item, index in items) ref="myref">
    ...
</div>

在其它组件中，我可以通过this.$refs.myref[i]...的代码引用组件中的变量和方法。但是，如果动态增减items数组的元素，则不能通过这种方法调用。Vue的文档中也明确说明了，$refs是非反应式的，不会变化。新增的ref也的确不起作用。

问题：

遇到这种情况，我如果想在上层组件中调用子组件中的method,还有其他方法吗？
（我想尝试使用事件总线注册子组件方法，但想不出具体的做法。）

不知道大家有没有什么好的办法，谢谢！

解决方案

子组件 ：

props: {
            fatherData:{
                type:Array
            }
        },
watch:{
    fatherData(){
            doSomething();
            this.$emit("sonDo",data);
        }
    }

父组件：

@sonDo="sonDo"

methods:{
    sonDo: function (sonData) {
                
            },
}

这篇关于javascript - 动态组件添加ref的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！