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

您可以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 } } });无法访问父母（我猜我没有检查）它）

但只是提示可能也会造成麻烦。

<强>更新

访问儿童参考：

＆＃13;

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

＆＃13;

sudo apt install php7.0-mbstring

＆＃13;

Answer 2

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

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

父组件中的方法：

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

如何从父母访问子ref

2 个答案: