Question

我正在尝试Vue.js，到目前为止，我很喜欢它，因为它比角度更简单。我目前在单页应用中使用vue-router和vue-resource，后者连接到后端的API。我想我的主要工作是主要的app.js，它加载了vue-router和vue-resource，以及每个路由的几个独立组件。

这是我的问题：当使用异步AJAX调用获取数据时，如何使用props将全局数据传递给子组件？例如，用户列表几乎可以在任何子组件中使用，因此我希望主app.js获取用户列表，然后允许每个子组件访问该用户列表。我希望app.js获取用户列表的原因是我只需要为整个应用程序进行一次AJAX调用。还有什么我应该考虑的吗？

当我在子组件中使用props时，我只得到users变量初始化的空数组，而不是AJAX调用后获取的数据。以下是一些示例代码：

Simplified App.js

var Vue = require('vue');

var VueRouter = require('vue-router')
Vue.use(VueRouter);
var router = new VueRouter({
    // Options
});

router.map({
    '*': {
        component: {
            template: '<p>Not found!</p>'
        }
    },
    '/' : require('./components/dashboard.js'),
});

Vue.use(require('vue-resource'));

var App = Vue.extend({
    ready: function() {
        this.fetchUsers();
    },

    data: function() {
        return {
            users: [],
        };
    },

    methods: {
        fetchUsers: function() {
            this.$http.get('/api/v1/users/list', function(data, status, response) {
                this.users = data;
            }).error(function (data, status, request) {
                // handle error
            });
        }
    }
});

router.start(App, '#app')

简化的app.html

<div id="app" v-cloak>
    <router-view users = "{{ users }}">
    </router-view>
</div>

简化的dashboard.js

module.exports = {
    component: {
        ready: function() {
            console.log(this.users);
        },

        props: ['users'],
    },
};

当dashboard.js运行时，它会向控制台输出一个空数组，因为app.js将users变量初始化为。{如何允许dashboard.js访问users的{{1}}变量？在此先感谢您的帮助！

P.S。我不想使用app.js选项，因为我不希望所有inherit: true变量在子组件中可用。

Answer 1

我相信这确实有效，而你却被$http的异步行为误导了。由于您的$http来电未立即完成，因此console.log呼叫在$http来电完成之前正在执行。

尝试针对watch在组件上放置users，并在该处理程序中添加console.log。

像这样：

module.exports = {
    component: {
        ready: function() {
            console.log(this.users);
        },

        props: ['users'],

        watch: {
            users: {
                handler: function (newValue, oldValue) {
                    console.log("users is now", this.users);
                },
                deep: true
            }
        }
    }
};

Answer 2

在新版本的Vue 1.0.0+中，您可以简单地执行以下操作，组件内的用户会自动更新：

<div id="app" v-cloak>
    <router-view :users="users"></router-view>
</div>

Vue.js - AJAX呼叫的全球数据

2 个答案: