我如何在Vue中的父子組件之間共享數據

Question

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

一開始用戶組件：

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

}) 

由於節目，結果組件是不是父/子關係我的一部分不能使用API​​的$ broadcast或$ dispatch方法。

在完成ajax承諾時是否可以將數據從一個組件傳遞到另一個組件？

Answer 1

注：這個答案是僅適用於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 
    } 
} 

當然你也可以給該事件任何你想要的名稱。

Answer 2

隨着Vue 2.0的不同，廣播已被棄用。 Vue documentation談論使用集中式事件總線來實現這一點。以下是你的方法;

1. 定義集中式事件中心。因此，在您的Vue公司的實例/ decalaration定義

   const eventHub = new Vue() // Single event hub 
   
   // Distribute to components using global mixin 
   Vue.mixin({ 
       data: function() { 
        return { 
         eventHub: eventHub 
        } 
       } 
   }) 
   

2. 現在，在你的組件，你可以發出事件與

   this.eventHub.$emit('show-results:users', { users: response.data.users }) 
   

3. ，並聽取你做

   this.eventHub.$on('show-results:users', data => { 
   // do your thing 
   })