VUE.JS: How to use a component method inside another component?

Question

Vue.js

There is an App.vue component with a set of components:

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

The Button.vue component takes a click handler function as a parameter. The Menu.vue
component has a method:

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

QUESTION: How CORRECT from the point of view of architecture to forward the method of the Menu component as a parameter to the Button component? To get something like this:

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

Answer 1

pass the method of the Menu component as a parameter to the Button component

Do not do it this way.
Let Button generate a click event that you subscribe to in App and change some property in the handler, which is passed as a parameter to Menu, where you will take the necessary actions depending on the value of this parameter ( example ). Finally - put a ref on the Menu instance and directly pull the method you are interested in in the click handler ( example ).