Vue.js

Question

我在我的单页应用程序中提供 Vue.js a try and so far I'm loving it because it's much simpler than angular. I'm currently using vue-router and vue-resource，它连接到后端的 API。我想我的工作主要是使用主 app.js，它加载 vue-router 和 vue-resource，以及每个路由的几个独立组件。

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

当我现在在子组件中使用 props 时，我只得到 users 变量初始化为的空数组，而不是 [=50 之后获取的数据=] 打电话。这是一些示例代码：

简化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 从 app.js 访问 users 变量？预先感谢您的帮助！

p.s。我不想使用 inherit: true 选项，因为我不想让所有 app.js 变量在子组件中可用。

Answer 1

我相信这确实有效，您被 $http 的异步行为误导了。因为您的 $http 调用没有立即完成，所以您的 console.log 在 $http 调用完成之前执行。

尝试在 users 组件上放置 watch 并在该处理程序中放置 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 调用的全局数据

Vue.js - Global Data from AJAX Call

javascript

ajax