Wie kann ich in Vue @ Daten zwischen nicht übergeordneten und untergeordneten Komponenten austausche

Ich habe 3 Komponenten (get-users, get-projects, get-tasks) - jede enthält eine Schaltfläche, die eine Ajax-Anforderung zum Abrufen einiger Daten auslöst. Ich möchte, dass die von der Ajax-Anforderung zurückgegebenen Daten in einer vierten unabhängigen Komponente auf der Seite angezeigt werden (show-results). z.B

<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>

Die get-users-Komponente:

<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>

Die Vue-Instanz / Dekalierung

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 },

})

Da die show-results-Komponente nicht Teil einer Eltern-Kind-Beziehung ist, kann ich die $ broadcast- oder $ dispatch-Methode der API nicht verwenden.

Ist es möglich, die Daten nach Abschluss des Ajax-Versprechens von einer Komponente auf eine andere zu übertragen?

Antworten auf die Frage(4)

Ihre Antwort auf die Frage