如何在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中的非父子组件之间共享数据的主要内容,如果未能解决你的问题,请参考以下文章

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

vue 实现数据共享模式.

Vue组件之间的数据共享

Vue组件之间的数据共享

Vue组件之间的数据共享

Vue组件之间的数据共享