VUE js вызывает метод дочернего компонента в другой иерархии компонентов
У меня есть следующая иерархия компонентов vuejs. Что я хочу сделать, чтобы вызвать метод COMP_B_ONE проверить(), когда метод COMP_A_TWO отправить() вызывается КАЖДЫЙ РАЗ.
MAIN_COMPONENT
COMP_A_ONE
COMP_B_ONE
validate()
COMP_B_TWO
validate()
COMP_A_TWO
submit()
Я уже реализовал эмит, когда отправка запускается в COMP_A_TWO, которую можно прослушать в ГЛАВНЫЙ КОМПОНЕНТ.
submit() {
this.$emit('submit')
}
что кажется лучшим подходом в этом отношении? любые предложения приветствуются.
Ответы 1
Я могу сделать это двумя способами.
1 - Глобальный 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, следуйте этому — Глобальная шина событий 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
предпочитаю подход eventBus. Работает хорошо.
Рад помочь :) Отметьте ответ как принятый, если считаете, что он работает в соответствии со всеми вашими требованиями. Спасибо
Вы можете использовать шину событий для связи одноуровневых компонентов.