Как из дочернего компонента vue вызвать метод родительского?

Question

[Syndr0me]

Есть примерно такая структура компонентов построенная на vue cli, как мне из самого последнего дочернего компонента вызвать метод главного родительского или поменять какое-либо его свойство? Допустим, при клике на кнопку.

Comments

[nickerlan]

Эмиттировать событие детским компонентом и слушать родительским

[Александр Шаповал]

а я метод как пропс передаю, и в дочернем его вызываю

Answer 1

[Антон Антон]

Правильный вариант - либо цепочка $emit и их обработчиков (можно через event bus), либо переход на vuex и их action. Неправильный - использование $root.method.

Comments

[Syndr0me]

наверное vuex оптимальное решение, вдруг этих компонентов будет 5, 10 или 15, делать цепочку через emit не ок совсем.
Вообще задача в том, чтобы рендерить компонент в корне body находясь в данный момент в компоненте попапа, хотел бы это силами vue сделать, но как то очень запарно выходит. МОжет есть попроще варианты чем я придумал?)

[Антон Антон]

Syndr0me, для себя пришел к тому, что попап должен быть внутри того компонента, состояние которого он меняет. Так что если используются props - то они используются по цепочке при сложной иерархии. То же и с emit (результатом действия).

[Klein Maximus]

Syndr0me, vuex отличное решение только для данных, которые используются несколькими компонентами (например, данные пользователя отображаются в нескольких местах страницы, или хранится флаг залогинен или нет пользователь). А если у Вас просто вложенные друг в друга компоненты - используйте цепочку $emit.