如何在 Vue 中的非父子组件之间共享数据 [英] How can I share data between non parent-child components in Vue

问题描述

我有 3 个组件(get-users、get-projects、get-tasks)——每个都包含一个按钮，它会触发一个 ajax 请求来检索一些数据.我希望从 ajax 请求返回的数据显示在页面上的第四个独立组件中(show-results).例如

<div class="col-md-6><get-users></get-users><get-projects></get-projects><get-tasks></get-tasks>
<div class="col-md-6><show-results></show-results>

获取用户组件:

Vue 实例/声明

var Vue = require('vue');Vue.use(require('vue-resource'));从'./components/get_users.vue'导入getUsers；从'./components/get_projects.vue'导入getProjects；从'./components/get_tasks.vue'导入getTasks；从'./components/show_results.vue'导入showResults；新的 Vue ({el: '#app',组件:{ GetUsers, GetProjects, GetTasks, ShowResults },})

由于 show-results 组件不是父/子关系的一部分，我无法使用 API 的 $broadcast 或 $dispatch 方法.

是否可以在 ajax promise 完成时将数据从一个组件传递到另一个组件?

解决方案

注意:这个答案只对 vue 1 有效

例如，您可以从根 Vue 实例进行广播.this.$root 使您可以访问当前 vue 实例中的根组件.因此它将到达它的孩子:

然后在 show-results 组件中监听 show-results:users 事件:

事件:{'显示结果:用户':函数(数据){//在这里做你的事情}}

当然，您可以为活动指定任何您想要的名称.

I have 3 components (get-users, get-projects, get-tasks) - each contains a button which fires an ajax request to retreive some data. I want the data returned from the ajax request to be displayed in a fourth independent component on the page (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>

The get-users component:

<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>

The Vue instance/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 },

})

As the show-results component isn't a part of a parent/child relationship I cant use the $broadcast or $dispatch methods of the API.

Is it possible to pass the data from one component to another at the completion of the ajax promise?

解决方案

Note: this answer is only valid for vue 1

You could do a broadcast from the root Vue instance for example. this.$root gives you access to the root component in your current vue instance. Thus it will reach at its children:

<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>

Then you listen for the show-results:users event in your show-results component:

events: {
    'show-results:users': function(data) {
        // do your stuff here
    }
}

Of course you can give the event any name you want to.

这篇关于如何在 Vue 中的非父子组件之间共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！