VUE.JS: Как воспользоваться методом компонента внутри другого компонента?

Question

[mifa-toster]

Есть компонент App.vue с набором компонентов:

<template>
    <div id="app">
        <Header>
            <Button onClick="" />
        </Header>
        <Menu />
    </div>
</template>

Компонент Button.vue принимает в качестве параметра функцию-обработчик клика.

У компонента Menu.vue имеется метод:

export default {
    methods: {
        onMenuOpen () {// menu is opened.}
    }
}

ВОПРОС: Как ПРАВИЛЬНО с точки зрения архитектуры пробросить метод компонента Menu в качестве параметра компоненту Button? Что бы получить примерно следующее:

<template>
    <div id="app">
        <Header>
            <Button :onClick="onMenuOpen" />
        </Header>
        <Menu />
    </div>
</template>

Answer 1

[0xD34F]

пробросить метод компонента Menu в качестве параметра компоненту Button

Не надо так.

Пусть Button генерирует событие клика, на которое вы подпишитесь в App и в обработчике измените какое-то свойство, которое в качестве параметра передаётся в Menu, где вы в зависимости от значения этого параметра будете предпринимать нужные действия (пример). Накрайняк - поставьте ref на экземпляр Menu и в обработчике клика напрямую дёргайте интересующий вас метод (пример).

Answer 2

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

Либо переходить на vuex, либо соорудить event bus, например по мануалу из https://habr.com/post/332628/ (в таком подходе можно несколько независимых шин сделать, что может быть удобным)