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?