如何从父级访问子引用

Question

我有需要验证的动态字段。 动态字段是使用组件创建的，可以通过按钮添加到数组中。 当我尝试验证动态字段时，找不到 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>

Answer 1

您可以Vue.nextTick使用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

在父instance内部并在子ref="dynamicForm"定义它不确定您想要的是什么，但我猜不能通过父子访问refs （我想我没有检查它）

但只是暗示可能也会引起麻烦。

更新

访问子参考：

 Vue.component('child', { template: '#child', data: function() { return { childValue: 'Child Comp ' + Math.ceil((Math.random() * 100)) } }, created: function() { } }); new Vue({ el: '#app', data: { }, created: function() { this.refIndex = 0; }, methods: { getRef() { this.refIndex++; return 'childComp' + this.refIndex; }, clickHandler: function() { for(var i=1; i <= this.refIndex; i++ ) { console.log(this.$refs['childComp' + i] .$refs.inputOfChild.value); } // this.$refs['childComp' + i] -> point to child compo // this.$refs['childComp' + i].$refs -> point to child compo's ref // this.$refs['childComp' + i].$refs.inputOfChild -> point to child compo's ref's input } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> <div id="app"> <button @click="clickHandler">Access Child's Ref</button><br/> <child :ref="getRef()" ></child><br/> <child :ref="getRef()" ></child><br/> <child :ref="getRef()" ></child><br/> <child :ref="getRef()" ></child><br/> </div> <template id="child"> <input ref="inputOfChild" type="text" v-model="childValue"> </template> 

Answer 2

为了访问子组件中的引用，我使用了这样的东西：

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

父组件中的方法：

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