Question

这是我关于stackoverflow的第一篇文章，如果我做错了，请提前抱歉。我的问题;

我已经设置了一个VueJS项目，并且我正在尝试从另一个组件获取我放在App.vue中的数据。为此，我使用这个。例如$ root.count，但它返回undefined。

Main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter);

const router = new VueRouter({
mode: 'history',
routes: [{
    path: '/',
    name: 'home',
    component: function (resolve) {
        require(['./components/Hello.vue'], resolve)
    }
}, {
    path: '/race-pilot',
    name: 'racePilot',
    component: function (resolve) {
        require(['./components/RacePilot.vue'], resolve)
    }
}
});

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
});

App.vue：

<template>
<div>
    <div class="menu" ref="menu">
        <router-link :to="{ name: 'home' }">Home</router-link>
        <router-link :to="{ name: 'racePilot' }">Race Pilot</router-link>
    </div>
    <div id="app">
        <router-view></router-view>
    </div>
</div>
</template>

<style src="./assets/css/app.scss" lang="scss"></style>

<script>
import Hello from './components/Hello'

export default {
    name: 'app',
    components: {
        Hello
    },
    data () {
        return {
            count: '0'
        }
    }
}
</script>

RacePilot.vue：

<template>
<div class="race-pilot">
</div>
</template>

<script>
export default {
    name: 'RacePilot',
    mounted() {
        console.log(this.$root.count);
    }
}
</script>

所以最后一个日志返回undefined。但是，如果我记录这个。$ root，我确实得到了这个对象。有人有什么想法吗？提前谢谢！

Answer 1

Vuex很好，但是如果您只想在基于路由器的应用程序中向所有视图公开属性，则可以在路由器视图上进行设置。

<router-view :count="count"></router-view>

然后你的视图组件只需要接受它作为道具。

export default {
    props:["count"],
    name: 'RacePilot',
    mounted() {
        console.log(this.count);
    }
}

Answer 2

你不应该这样做。

当然，您不应该尝试访问其他类似的组件。

要在组件之间共享数据，您可以使用props（单向绑定）或Vuex使数据可以通过商店从所有组件访问和编辑。

如果您以这种方式启动Vue应用，则可以使用全局$store或$router：

new Vue({
    el: '#q-app',
    router,
    store
    render: h => h(require('./App'))
  })

然后你可以访问商店（用于状态更改或访问状态（不要以这种方式改变状态）） - this.$store.state.yourStaneName

Answer 3

this。$ root引用顶级Vue实例（新Vue ...），不引用App VueComponent。

这确实很hacky，最好使用其他解决方案，但这可能有效：

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App },
    methods: {
      getCount() {
        return this.$children[0].count
      }
    },
});

并在RacePilot.vue中使用getCount（）：

export default {
    name: 'RacePilot',
    mounted() {
        console.log(this.$root.getCount());
    }
}

Answer 4

它应该按原样工作，因为它正在工作here。

然而，管理全局变量的更好方法应该由状态机解决，这些变量可以跨组件使用。 Vue Vuex为此目的here {。}}。

Answer 5

您正在尝试访问存储在App.vue中的数据，但是该数据对于组件而言是本地的，无法全局访问。

App.vue不是根实例（由$root引用），而是根实例中实际上在main.js创建的第一个组件。在此创建期间，您需要通过$root传递所有子组件公开的数据。

这是main.js的相关部分，已相应修改：-

new Vue({
    el: '#app',
    data: { count: 0 },
    router,
    template: '<App/>',
    components: { App }
});

提示：要确认App.vue确实是根实例的第一个子代，请尝试比较this.$root和this.$parent的引用。它应该返回true，这意味着根实例是App.vue的父实例。

参考文献：-

https://vuejs.org/v2/guide/instance.html
https://vuejs.org/v2/api/#vm-root
https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Root-Instance

Answer 6

您还可以通过将App组件直接传递到Vue实例，使该组件成为实际的根，

new Vue(App).$mount('#app')

您可能必须将路由器移至App.vue，但这将确保this.$root将直接解析为您的App组件。

无法访问VueJS中的根数据

6 个答案: