小编Pap*_*eau的帖子

如何在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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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 …
Run Code Online (Sandbox Code Playgroud)

vue.js

13
推荐指数
2
解决办法
4456
查看次数

标签 统计

vue.js ×1