How to pass component property value to another Vue component?

Question

Vue.js

There is a component with navigation, it has a button when clicked on which the method is called. This method changes the value to isAadaptive = true

The main component (page with blocks) has a block (adaptive-menu) that needs to be hidden or shown, depending on the value of the isAdaptive property from the child component. In the main component, I embed a component with navigation

In other words, if the isApative property in the child component becomes true, then you need to show the block in the main component

How can I get the isAdaptive value of the child component (Navigation.vue?

Home.vue (main component):

<template>
<Navigation />

<div class="adaptive-menu"></div>
</template>

<code lang="javascript">
<script>
import Navigation from "../components/Navigation";

data() {
      return {
        
      };
    }
</script>
</code>

child component Navigation.vue:

<template>
<div class="nav-hamburger" @click="showMenu">
        <div class="nav-hamburger-item"></div>
        <div class="nav-hamburger-item"></div>
        <div class="nav-hamburger-item"></div>
      </div>
</template>

<script>
export default {
  name: "Navigation",
  methods: {
    showMenu() {
      this.isAdaptive = true;
    }
  },
  data() {
    return {
      isAdaptive: false
    };
  },
};
</script>

Answer 1

In child component:

watch: {
  isAdaptive: {
    immediate: true,
    handler(val) {
      this.$emit('adaptivity-toggled', val);
    },
  },
},

In parent:

<Navigation @adaptivity-toggled="onAdaptivityToggled" />

methods: {
  onAdaptivityToggled(e) {
    console.log(e); // ну вот и всё
  },
},