我有3个组件(get-users,get-projects,get-tasks) - 每个组件都包含一个按钮,用于触发ajax请求以检索某些数据。我希望从ajax请求返回的数据显示在页面上的第四个独立组件中(show-results)。 e.g。
<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>
get-users组件:
<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实例/ 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组件不是父/子关系的一部分,我无法使用API的$ broadcast或$ dispatch方法。
是否可以在完成ajax承诺时将数据从一个组件传递到另一个组件?
答案 0 :(得分:11)
使用Vue 2.0时,由于广播已被弃用,因此情况略有不同。 Vue documentation讨论使用集中式事件总线来实现这一目标。这是你怎么做的;
定义集中式事件中心。所以在你的The Vue实例/ 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
})
答案 1 :(得分:2)
注意:此答案仅适用于vue 1
例如,您可以从根Vue实例进行广播。 this.$root
使您可以访问当前vue实例中的根组件。因此,它将达到它的孩子:
<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:users
组件中收听show-results
事件:
events: {
'show-results:users': function(data) {
// do your stuff here
}
}
当然,您可以为活动提供您想要的任何名称。
答案 2 :(得分:2)
如果要在许多嵌套组件之间共享数据,请使用这个小的plugin:
Vue.use(VueGlobalVariable, {
globals: {
user: new User('testuser'),
....
},
});
在任何组件中使用$user
!