VUE js вызывает метод дочернего компонента в другой иерархии компонентов - PullRequest
Новая
       14

VUE js вызывает метод дочернего компонента в другой иерархии компонентов

1 голос
/ 28 мая 2019

У меня есть следующая иерархия компонентов vuejs.Что я хочу сделать, чтобы вызвать COMP_B_ONE validate () метод, когда COMP_A_TWO submit () метод вызывается КАЖДЫЙ РАЗ. 

MAIN_COMPONENT
              COMP_A_ONE
                    COMP_B_ONE
                          validate()
                    COMP_B_TWO
                          validate()
              COMP_A_TWO
                    submit()

Я ужереализован emit, когда submit запускается в COMP_A_TWO , который можно прослушивать в MAIN_COMPONENT 

submit() {
  this.$emit('submit')
}

, что кажется лучшим подходом в этом отношении?Любые предложения приветствуются.

1 Ответ

2 голосов
/ 28 мая 2019

Я могу сделать это двумя способами.

1 - Global EventBus Я создам eventBus и регистрирую события в нем из любого файла и слушаю его где угодно 

import { EventBus } from '@/eventBus' 
// simply import it to component which need listen the event


//Register Event where you have your methods - like In your COMP_B_TWO                   
 EventBus.$on('validate', () => { this.validate() })

// Emit event from another component
EventBus.$emit('validate')// Like directly from your COMP_A_TWO

Чтобы узнать, как создать eventBus, следуйте этому - Global Event Bus Vue

Другой способ, которым я могу думать, это

2 - Ссылка

Добавить ссылку на COMP_A_ONE как 

<COMP_A_ONE ref = "one" />

Затем добавить ссылку на COMP_B_ONE

<COMP_B_ONE ref = "b-one" />

Теперь, когда вы запускаете submit с main component

выполнить его - 

this.$on('submit', () => {
  this.$refs.one['b-one'].validate()
})

Это полностью зависит от того, куда ты хочешь идти -

  • Если вам нужно позвонить validate для многих других мест, я бы предложил выбрать EventBus
  • Вам нужен только текущий компонент, используйте Refs
...