javascript - 如何从父级访问子级引用

Question

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

子组件

<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>

Answer 1

为了访问子组件中的引用，我使用如下内容:

...
<Parent>
  <Child ref="child" />
</Parent>
...

父组件中的方法:

...
onSubmit() {
  let form = this.$refs.child.$refs.form;
  
  if (!form.validate()) {
    return;
  }
}
...