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

我有3个组件（get-users，get-projects，get-tasks） - 每个组件都包含一个按钮，用于触发ajax请求以检索某些数据。我希望从ajax请求返回的数据显示在页面上的第四个独立组件中（show-results）。例如

<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承诺时，是否可以将数据从一个组件传递到另一个组件？

9427

2018-01-21 14:01

起源

它们是否都在同一根Vue实例中？ - nils

对，他们是。我编辑了原始帖子以显示Vue声明。 - Papa Gateau

答案:

注意：此答案仅对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
    }
}

当然，您可以为活动提供您想要的任何名称。

2018-01-21 15:16

太好了，谢谢！ - Papa Gateau

使用Vue 2.0时，由于广播已被弃用，因此情况略有不同。 Vue文档谈论使用集中式事件总线来实现这一目标。这就是你如何做到的;

定义集中事件中心。所以在你的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
})

2017-11-04 20:57

对不起，我是vue的新手，想要在vue 2中解决这个问题。你能扩展一下你在做什么吗？ - daslicious

nm，我发现了这个 vuejs.org/v2/guide/... - daslicious

“show-results：”只是事件名称的一部分，或者这是特定于vue的语法？ - Dima Fomin

只是活动名称的一部分。 - kakoni

这不会跨组件同步数据吗？只是传递数据？ - Owen

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

答案:

热门问题

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