1 Вопрос: Vue получить рекурсивный родитель (желательно без Event Bus)

вопрос создан в Thu, May 2, 2019 12:00 AM

У нас есть форма, похожая на эту:

<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" способ сделать это? Я бы не хотел использовать шину событий, поскольку у нас ее нет в нашем приложении, и кажется, что из-за этого излишне (если вы не сказали бы, что это будет намного лучше). То же самое с излучением событий через слои и слои компонентов. Любая помощь /идеи? Спасибо!

    
0
1 ответ                              1                         

Это может быть полезно для предоставления /ввода. Вы не можете изменить v-форму, потому что она не ваша, но вы можете сделать это в своем дочернем компоненте верхнего уровня ...

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

затем в любом дочернем компоненте, который нуждается в этом ...

inject: ['form']
...
this.form.resetValidation()
    
1
2019-05-02 15: 19: 38Z
  1. Отлично, не знал, что предоставить /ввести. Отлично работает для моего варианта использования, большое спасибо.
    2019-05-03 09: 10: 55Z
источник размещен Вот