动态组件添加ref的问题

Question

需求：

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

在子组件中，有：

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

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

问题：

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

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

Answer 1

子组件 ：

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

父组件：

@sonDo="sonDo"

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

Answer 2

可以利用nextTick,等待动态组件加载后，调用子组件的方法。
<component ref="modal" :is="currentComponent" ></component>
showAddForm() {

    this.currentComponent = '子组件'                                       
    this.$nextTick(() => {                                                       
      this.$refs.modal.showAddForm()     //showAddForm为子组件的方法                                                                                          
    })                                                                           
  },

Answer 3

你是想通过调用子组件的方法来增减item数组中的元素吧?
是否可以考虑用vuex去watch一个变量，变量改变则调用方法。
再在父组件（其他组件）去改变state中的值。
个人想法。

Answer 4

这种情况还有必要操作dom了吗？

Answer 5

可以看看这个例子，react-ref，其通过cloneElement对新添加的组件添加ref，从而可以调用新添加的组件的实例方法。