How to pass a variable to another vue component?

Question

Vue.js

Good afternoon, there is such a question, how to transfer the value of a variable from one component to another neighboring one? The difficulty is that this should happen on click. I have a button in one component that opens the menu, the second component is the menu itself. I read about props, but he also receives a variable from the very beginning, and it becomes undefined.
Panel with button:

export default{
        name: "left-aside",
        isBarMenuClicked: false, // эту переменную нужно передать
        methods: {
            openLeftMenu: function(){
                this.isBarMenuClicked = true;
            }
        }
    }

Menu:

export default {
        name: "boards-menu",
        data() {
            return {
                isLeftMenuShowed: true, // вторая переменная, отвечающая за меню
            }
        },
        methods: {
            closeLeftMenu: function () {
                this.isLeftMenuShowed = false
            }
        },
        props: [
            'isBarMenuClicked'
        ]
    }

Also, how can you get rid of two variables? The menu component has a variable that closes the menu, and to open the menu, you have to use the second one passed from the button panel component. Somehow it's not really pretty.
Thanks in advance.

Answer 1

https://vuex.vuejs.org/ru/guide/