Question

我们有一个与此类似的表格：

<v-form v-model="valid" ref="form">
  <some-component1>
    <some-component2>
      <some-component3>
        <v-text-field @focus="fieldFocus" />
      </some-component>
    </some-component>
  </some-component>
</v-form>

在着眼于文本字段时应重置v表单的validationErrors。现在，我可以使用以下工具：

methods: {
  fieldFocus () {
    if (this.parentForm) {
      this.parentForm.resetValidation()
    }
  }
},
computed: {
  parentForm () {
    let parent = this
    while (parent && parent.$parent) {
      parent = parent.$parent
      if (parent.$refs && parent.$refs.form) {
        return parent.$refs.form
      }
    }
    return null
  }
}

好吧...它可以工作，并且计算的内容将被缓存，因此它不应该对性能造成不利影响。但是我当然不希望使用while循环 shudder

是否有优化方法？或“ Vue”做到这一点的方式是什么？我不想使用事件总线，因为我们的应用程序中没有总线，而且似乎为此而矫over过正（除非您说这样做会更好）。与通过组件的层和组件层发出事件相同。任何帮助/想法吗？谢谢！

Answer 1

这可能是提供/注入的好方法。您无法修改v-form，因为它不是您的，但在顶层子组件中，您可以...

provide: { 'form': parent.$refs.form }

然后在任何需要它的子组件中...

inject: ['form']
...
this.form.resetValidation()

Vue获取递归父级（最好不带事件总线）

1 个答案: