Display components on key click?

Question

Vue.js

Hello. I started learning Vue, before that I had experience with React.

It is necessary to make such functionality: there are two initially hidden components. These components are displayed by clicking on keys 1 and 2, respectively. All these two components are in the parent App component.
Displaying these components on a click on the keys is not difficult, but. It is necessary to make it so that when one element is active, it would be impossible to call another.
For example:
Key 1 pressed -> component 1 appeared.
Key 2 pressed -> nothing happened.
Key 1 pressed -> component 1 disappeared
. Key 2 pressed -> component 2 appeared.

Thus, you need to make sure that one component of all is always active.

The question is, how best to approach the implementation of such functionality?
Use Vuex or somehow display elements using props?

Not quite standard functionality, so I don't even know how to implement it...
Thanks in advance, for the remote time)

ps I use Vue3
I heard about EventBus, but it doesn't seem to work in Vue 3.

Answer 1

You don't need a state manager or an event bus. Nothing. Just in the parent, create a radio button. And on the switch, the parent displays one or the other child component. That's all.