Vue 组件可以访问 App.vue 中的变量吗？

Question

我在 Vue.js 中有一个应用程序，其中有一个像这样的 App.vue：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',

 data() {
    return {
      user: null,
    }
  },

  methods: {
       getUser() {
        axios 
        .get(`auth/user/`)
        .then(response => {
          this.user=response.data.pk
        })
      }
  },

  beforeMount() {
    this.getUser();
  },
}
</script>

我可以以某种方式从其他组件访问用户变量吗？我应该如何导出和导入它才能成功？

Answer 1

4. $root.someVariable

在 Vue 2 中工作，未在 3 中测试。

Answer 2

你可以：

1. 将其作为 prop 传递
   • 注意：要从子组件更改它，您应该发出一个事件告诉 root 更新它。不要尝试直接在子代中对其进行突变。
2. 使用提供/注入
3. 将用户移至共享状态解决方案，例如Vuex或Pinia