如何在Vue中的非父子组件之间共享数据
Posted
技术标签:
【中文标题】如何在Vue中的非父子组件之间共享数据【英文标题】:How can I share data between non parent-child components in Vue 【发布时间】:2016-04-27 19:43:17 【问题描述】:我有 3 个组件(get-users、get-projects、get-tasks)——每个组件都包含一个按钮,用于触发 ajax 请求以检索一些数据。我希望从 ajax 请求返回的数据显示在页面上的第四个独立组件(显示结果)中。例如
<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 实例/声明
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 承诺完成时将数据从一个组件传递到另一个组件?
【问题讨论】:
它们是否都在同一个根 Vue 实例中? 是的,他们是。我已经编辑了原始帖子以显示 Vue 声明。 【参考方案1】:如果您想在大量嵌套组件之间共享数据,请使用这个小 plugin:
Vue.use(VueGlobalVariable,
globals:
user: new User('testuser'),
....
,
);
在任何组件中使用$user
!
【讨论】:
我刚刚用过这个库,真的很方便使用【参考方案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
组件中监听show-results:users
事件:
events:
'show-results:users': function(data)
// do your stuff here
当然,你可以给活动起任何你想要的名字。
【讨论】:
【参考方案3】:在 Vue 2.0 中情况有所不同,因为广播已被弃用。 Vue documentation 谈到使用集中式事件总线来实现这一点。你可以这样做;
定义集中式事件中心。所以在你的 Vue 实例/声明中定义
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
)
【讨论】:
对不起,我是 vue 新手,想在 vue 2 中解决这个问题。你能扩展一下你在做什么吗? nm,我发现了这个vuejs.org/v2/guide/… “show-results:”只是事件名称的一部分还是 vue 特有的语法? 只是事件名称的一部分。 这不会跨组件同步数据,对吧?只是传递数据?以上是关于如何在Vue中的非父子组件之间共享数据的主要内容,如果未能解决你的问题,请参考以下文章