Vue 3：当中间有路由器视图时，如何将数据从组件传递到 App.vue？

Question

I have the following structure:

• src
  • components
    • Footer.vue
  • views
    • Page.vue
  • App.vue

I would like to be able to access the 'message' variable in App.vue, but I can´t figure out how to do it when Footer.vue is not a direct child of App.vue (but child of Page.Vue which - via the router - is child App.vue).

What do I need to add in my files? There are now as follows - and (of course) no message appears in App.vue:

//App.vue
<template>
  <p>Message is: {{ message }}</p>
  <router-view />
</template>

<style lang="scss">
@import "./_scss/main.scss";
</style>

.

//Page.vue
<template>
  <Footer/>
</template>

<script>
import Footer from '@/components/Footer.vue'

export default {
  components: {
    Footer
  }
}
</script>

.

//Footer.vue
<template>
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</template>

<script>
export default {
    data() {
        return {
            message: ''
        }
    }
}
</script>

Answer 1

Maybe Composition API and ES6 modules ?

@/compositions/composition.js
import { ref } from 'vue'

const message = ref('test');

export const useComposition = function() {

  // other functions, for example to mutate message ref
  
  return {
    message,
    // ...
  }
}

And now you import your composition in the components that need to access message :

// Footer.vue, App.vue
<script>
import { defineComponent } from 'vue'
import { useComposition } from '@/compositions/composition'

export default defineComponent({
  setup() {
    const { message } = useComposition();

    return { // make it available in <template>
      message
    }
  },
})
</script>

If you want to quickly get started with Composition API, see this .