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

【问题标题】：Vue 3: How to pass data from component to App.vue when there is a router-view in between?Vue 3：当中间有路由器视图时，如何将数据从组件传递到 App.vue？
【发布时间】：2021-09-13 21:19:06
【问题描述】：

我有以下结构：

源
- 组件
  - Footer.vue
- 查看次数
  - 页面.vue
- App.vue

我希望能够访问 App.vue 中的“消息”变量，但是当 Footer.vue 不是 App.vue 的直接子级（而是 Page 的子级）时，我不知道该怎么做.Vue - 通过路由器 - 是子 App.vue）。

我需要在我的文件中添加什么？现在如下 - 并且（当然）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>

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

也许是 Composition API 和 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,
    // ...
  }
}

现在你在需要访问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>

如果您想快速开始使用 Composition API，see this。

【讨论】：