javascript - 页面刷新后如何获取父组件到子组件的最新数据

Question

我正在开发一个项目，并使用 Vue.js 作为前端。我在 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 为 null/未定义，因为 this.$root.getFriends() 返回 null/未定义。我可以将其移至 user 组件，但我想将其保留在 main.js 中，以便使用 GET 调用一次并且数据将被使用可用于整个应用程序。

任何有关如何解决此问题的意见都会很好。我使用的是Vue 2.0.1

Answer 1

实际上，您想要做的是将组件所需的数据作为 props 传递。

最简单的方法就是这个。

<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 或其他一些状态管理工具。