Question

我正在开发一个项目并使用main.js作为前端。我在new Vue({ // eslint-disable-line no-new //el: '#app', router, data () { return { friends: [] } }, methods: { getFriends: function () { return this.friends; } }, created: function () { this.$http.get('/user/' + this.getUserIDCookie('userID') + '/friends').then(function (response) { this.friends = response.data; }); }, components: { 'nav-bar': require('./components/Navigation.vue') }, template: ` <div id="app"> <nav-bar></nav-bar> <router-view class="router-view"></router-view> </div>` }).$mount('#app');文件中有以下代码。

localhost/#/user/1/details

在其中一个页面中（例如，当页面被重定向到main.js时，我正在从<script type="text/babel"> export default { name: 'profile', data: function () { return { user: {}, friends: [] } }, methods: { // Some methods }, created: function () { this.friends = this.$root.getFriends(); } } </script>检索好友列表，如下所示：

this.friends

刷新当前页面时出现问题。页面刷新后，this.$root.getFriends()为null / undefined，因为user返回null / undefined。我可以将其移至main.js组件，但我希望将其保留在GET中，以便ERROR in C:\Users\xxxx\Desktop\project\d3\node_modules\@types\jquery\index.d.t s (3779,5): error TS2300: Duplicate identifier 'export='. ERROR in C:\Users\xxxx\Desktop\project\d3\typings\globals\jquery\index.d.ts (3217,5): error TS2300: Duplicate identifier 'export='.调用一次，数据将可用于整个应用程序。

有关如何解决此问题的任何意见都很棒。我正在使用Vue 2.0.1

Answer 1

真的，你想要做的是将组件所需的数据作为道具传递。

最简单易行的方法就是这样做。

<router-view class="router-view" :friends="friends"></router-view>

在您的个人资料组件中，

export default {
    props:["friends"],
    name: 'profile',
    data: function () {
        return {
            user: {},
            friends: []
        }
    },
    methods: {
        // Some methods
    }
}

如果您想要更复杂，VueRouter的更高版本允许您以多种方式pass properties to routes。

最后，如果您的应用程序变得足够复杂，那么总会有Vuex或其他一些状态管理工具。

Answer 2

问题在于，当您刷新页面时，整个应用程序会重新加载，其中包括get，这是异步的。路由器指出它需要呈现details，以便加载组件并调用getFriends，但异步get尚未完成。

可以通过从get保存并拉出Promise来解决这个问题，但Bert的回答是正确的：Vue Way是将数据作为道具发送，而不是让孩子拉来自父母。

如何在页面刷新后从父组件到子组件获取最新数据

2 个答案: