如何从父级访问子级引用答案

【问题标题】：How to access child ref from parent如何从父级访问子级引用
【发布时间】：2017-12-28 04:27:40
【问题描述】：

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

【问题讨论】：

标签： javascript validation vuejs2

【解决方案1】：

您可以为此使用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>

【讨论】：

我的 this.$refs.dynamicForm.validate 方法在父级上未定义，因为 this.$refs.dynamicForm 未定义。
多个<child ref="childComp" ></child> 怎么样？

【解决方案2】：

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

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

父组件中的方法：

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

【讨论】：