Vue中如何在非父子组件之间共享数据

Question

我有 3 个组件（get-users、get-projects、get-tasks）- 每个组件都包含一个按钮，该按钮会触发 ajax 请求以检索一些数据。我希望从 ajax 请求返回的数据显示在页面上的第四个独立组件 (show-results) 中。例如

<div class="row">
    <div class="col-md-6>
        <get-users></get-users>
        <get-projects></get-projects>
        <get-tasks></get-tasks>
    </div>
    <div class="col-md-6>
        <show-results></show-results>
    </div>
</div>

获取用户组件：

<script>
export default {
    template: require('./get_users.template.html'),

    data: function() {
        return {
            userList: ''
        }
    },

    methods: {
        getUsers(e) {
            e.preventDefault();

               this.$http.get('api/getusers').then(function (response) {
                    this.userList = response.data.users;   // How can I also pass this to the show-results component?         
            })
        }
    }
}
</script>

Vue instance/decalaration

var Vue = require('vue');

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

import getUsers  from './components/get_users.vue';
import getProjects  from './components/get_projects.vue';
import getTasks  from './components/get_tasks.vue';
import showResults  from './components/show_results.vue';


   new Vue ({
    el: '#app',

    components: { GetUsers, GetProjects, GetTasks, ShowResults },

})

由于 show-results 组件不是 parent/child 关系的一部分，我不能使用 API.

的 $broadcast 或 $dispatch 方法

是否可以在 ajax 承诺完成后将数据从一个组件传递到另一个组件？

Answer 1

注意：此答案仅对vue 1有效

例如，您可以从根 Vue 实例进行广播。 this.$root 使您可以访问当前 vue 实例中的根组件。因此它将达到 children:

<script>
export default {
    template: require('./get_users.template.html'),

    data: function() {
        return {
            userList: ''
        }
    },

    methods: {
        getUsers(e) {
            e.preventDefault();

               this.$http.get('api/getusers').then(function (response) {
                    this.userList = response.data.users;
                    this.$root.broadcast('show-results:users', { users: response.data.users });
            })
        }
    }
}
</script>

然后您在 show-results 组件中监听 show-results:users 事件：

events: {
    'show-results:users': function(data) {
        // do your stuff here
    }
}

当然你可以给活动取任何你想要的名字。

Answer 2

在 Vue 2.0 中，情况有点不同，因为广播已被弃用。 Vue documentation 谈论使用集中式事件总线来完成此任务。您可以这样做；

定义集中式事件中心。所以在你的 Vue instance/decalaration 中定义

const eventHub = new Vue() // Single event hub

// Distribute to components using global mixin
Vue.mixin({
    data: function () {
        return {
            eventHub: eventHub
        }
    }
})

现在在您的组件中，您可以使用

发出事件

this.eventHub.$emit('show-results:users', { users: response.data.users })

听你的

this.eventHub.$on('show-results:users', data => {
// do your thing
})

Answer 3

如果您想在大量嵌套组件之间共享数据，请使用这个小 plugin：

Vue.use(VueGlobalVariable, {
  globals: {
    user: new User('testuser'),
    ....
  },
});

在任何组件中使用 $user！

Vue中如何在非父子组件之间共享数据

How can I share data between non parent-child components in Vue

vue.js