Javascript 如何从父对象访问子引用

我有需要验证的动态字段。动态字段是使用组件创建的，可以通过按钮添加到数组中。当我尝试验证动态字段时，没有找到ref

子组件

<template>
   <el-form :model="dist"
     ref="dynamicForm"
     :rules="rules">...</el-form>
</template>

<template>
 <el-form :model="dist"
         ref="parentForm"
         :rules="rules">

   <dynamicField
      v-for="df in items></dynamicField>

 </el-form>
</template>

<script>
this.$refs.dynamicForm.validate( (valid) => {
  console.log("Dynamic form validated? " + valid);
})
</script>

...

家长

<template>
   <el-form :model="dist"
     ref="dynamicForm"
     :rules="rules">...</el-form>
</template>

<template>
 <el-form :model="dist"
         ref="parentForm"
         :rules="rules">

   <dynamicField
      v-for="df in items></dynamicField>

 </el-form>
</template>

<script>
this.$refs.dynamicForm.validate( (valid) => {
  console.log("Dynamic form validated? " + valid);
})
</script>

您可以使用
Vue.nextTick
，这样
Vue
就有足够的时间将引用绑定到
vm

....
methods:{
    clicked(){
      var vm = this      
      Vue.nextTick(() => {
         this.$refs.dynamicForm.validate( (valid) => {
             console.log("Dynamic form validated? " + valid);
         })
      })
    },
}
....

我在代码中也发现了一些东西

您正在使用

this.$refs.dynamicForm

在父
实例内部
并在子
ref=“dynamicForm”
中定义它，不确定它是您想要的，但我想不能通过父-子访问它（我想我没有检查它）

但仅仅是暗示一下，它可能也会引起麻烦

更新

访问子引用：


Vue.component（'child'{
模板：“#子项”，
数据：函数（）{
返回{
childValue:'Child Comp'+Math.ceil（（Math.random（）*100））
}
},  
已创建：函数（）{
}
});
新Vue({
el:“#应用程序”，
数据：{
},
已创建：函数（）{
此参数为0.refIndex=0；
},
方法：{
getRef（）{
这个.refIndex++；
返回'childComp'+this.refIndex；
},
clickHandler:函数（）{
对于（变量i=1；我指向子组件
//此.$refs['childComp'+i]。$refs->指向子组件的ref
//此.$refs['childComp'+i]。$refs.inputOfChild->指向子组件的ref输入
}
}
})；

访问孩子的参考









My
this.$refs.dynamicForm.validate
方法在父级上未定义，因为
this.$refs.dynamicForm
未定义。多个
如何？