How to interact with the state of one component in another?

Question

Vue.js

Hello everyone
I've been working with VueJs for a while now, but recently I got a project that I would like to understand.

There are two components:
Header.vue
Menu.vue The Menu.vue



component has a button "close right menu" , when clicked, the right menu disappears:
<button @click="menuShow = false">close</button>

data() {
    return {
      menuShow: true,
    };
  },

How can I make a button in another component, that is, in Header.vue , with the ability to open and close this menu?
I understand that I somehow need to transfer data about the state of the menu from one component to another?

I will be very grateful for the answer

Answer 1

For the overall state of the entire application: vuex .
To link children who cannot live without a particular parent to that parent: provide \ inject .
For a tight bunch of single components: a separate Vue.observable \ Vue.reactive object imported in the required components.
For explicit interaction of nearby components, the usual vue-flow: up events through $emit and @on, down props.

Answer 2

here you can see how to interact between components