Vue2.0 无法访问的变量

Posted 2023-02-23

【中文标题】Vue2.0 无法访问的变量

【英文标题】：Vue2.0 unaccessible variable

【发布时间】：2018-01-10 08:23:38

【问题描述】：

我是 Vue 的新手，我遇到了无法访问的问题。我有两个文件。

第一个是 App.vue，其中定义了<router-view>

<script>

export default 
  name: 'app',
  data()
    return
      info: false,
    
  ,
  beforeMount()
        example...
        this.info= true
        this.$router.push('/main'); //where in router-view visible is component Main.vue

      
  

</script>

第二个是Main.vue组件，很清楚：

<script>
export default
    name: 'main',
    data()
        return

        
    ,
    beforeMount()
        //what i want to do:
        console.log(App.data().info) //here should be visible true in console log
     

我想在第二个文件中访问第一个文件中的属性。如何正确地做到这一点？先感谢您

【问题讨论】：

app和main是什么关系？

Vue.js - Using parent data in component的可能重复

Vue.js - Using parent data in component的可能重复

this.$parent.info 似乎工作正常，但是，当我手动重新加载窗口时，它又是错误的。为什么？页面重新加载后应用的 beforeMount() 是否不起作用？

如何解释嗯...我想要一个全局函数，在每次刷新/重新加载时设置 info = true 并且该值可以在每个子站点/组件中访问。我认为每次重新加载/刷新都会执行来自 Vue.app 的 beforeMount()，因为定义了 。我错了吗？

【参考方案1】：

每个组件实例都有自己的隔离范围。如此处所述：https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props

您不能（也不应该）直接引用子组件模板中的父数据。可以使用 props 将数据传递给子组件。

【参考方案2】：

我能想到的两个选项：

将道具传递给路由组件

来源：link

在你的路由器中：

import main from './main.vue'

    const router = new VueRouter(
      routes: [
         path: '/main/:id', component: main 
      ]
    )

在你的 Main.vue 中

访问变量：this.$route.params.id

---

将数据保存在状态管理器中，并通过另一个组件中的状态访问他Vuex