如何從父級訪問子引用

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;
  }
}
...