How to pass data from parent to parent

[hexman]

Hello,

I want to pass the property infoPage from Home / About to Navbar
In router → index.js we have included the components: Home.vue and About.vue

My components:

App.vue

<template>
  <header>
    <Navbar/>
  </header>
  
  <main>
    <router-view/>
  </main>
</template>

<script>
  import Navbar from "....";
  export default {
    components: {Navbar}
  }
</script>

Navbar.vue

<template>
  <div>
    <h6> here I want to introduce the infoPage property from Home.vue or About.vue </h6>
  </div>
</template>

<script>
 export default {
   name: "Navbar",
 }
</script>

Home.vue

<template>
  <div class="home">
    text text
  </div>
</template>

<script>
 export default {
   name: 'Home',
   data() {
     return {
       infoPage: 'Name page Home'
    }
   }
 }
</script>

About.vue

<template>
  <div class="about">
    text text
  </div>
</template>

<script>
 export default {
   name: 'About',
   data() {
     return {
       infoPage: 'Name page About'
    }
   }
 }
</script>

Use: Vue.js 3, Vuex and folder structure created with Vue CLI

[JamesThomson]

This depends a bit on the use case…

• Basic data or resource identifiers can be passed as route params or query params
• For more complex data structures, use state management

[hexman]

I tried this option:
in Navbar.vue

<template>
  <div>
    <h6>{{ namePage }}</h6>
  </div>
</template>

<script>
 export default {
   name: "Navbar",
   data() {
     return {
       namePage: ''
     }
   },
   created() {
     this.namePage = this.$route.meta.namePage;
  }
 }
</script>

in Home.vue

<template>
  <div class="home">
    text text
  </div>
</template>

<script>
 export default {
   name: 'Home',
   created() {
     this.$route.meta.namePage= 'Home page';
   }
 }
</script>

This option works when loading the page. When I change the pages, the data is no longer updated.

[JamesThomson]

Use an in-component route guard instead of created.

[hexman]

I found the answer here:

How to pass data from parent to parent in VueJs