Wie kann ich Daten zwischen Nicht-Eltern-Kind-Komponenten in Vue teilen

Question

Ich habe 3 Komponenten (Get-Benutzer, Get-Projekte, Get-Aufgaben) - jede enthält eine Schaltfläche, die eine Ajax-Anfrage zum Rereiven einiger Daten auslöst. Ich möchte, dass die von der Ajax-Anfrage zurückgegebenen Daten in einer vierten unabhängigen Komponente auf der Seite angezeigt werden (Show-Ergebnisse). z.B.

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

Die get-Benutzer-Komponente:

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

Die Vue Instanz/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 }, 

}) 

Als Show-Ergebnisse Komponente ist kein Teil eines Eltern/Kind-Beziehung I kann die $ broadcast- oder $ dispatch-Methoden der API nicht verwenden.

Ist es möglich, die Daten nach Abschluss des Ajax-Versprechens von einer Komponente zur anderen zu übertragen?

Answer 1

Hinweis: Diese Antwort ist nur gültig für vue 1

Sie könnten eine Sendung von der Wurzel Vue Instanz zum Beispiel tun. this.$root gibt Ihnen Zugriff auf die Root-Komponente in Ihrer aktuellen vue-Instanz. So wird es an seiner Kinder erreichen:

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

Dann hören Sie die show-results:users Ereignis in Ihrem show-results Komponente:

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

Natürlich können Sie das Ereignis geben einen beliebigen Namen zu wollen.

Answer 2

Mit Vue 2.0 sind die Dinge etwas anders, da Broadcast veraltet ist. Vue documentation spricht über die Verwendung von zentralen Event-Bus, um dies zu erreichen. Hier ist, wie Sie es konnten;

1. Definieren Sie einen zentralen Event-Hub. Also in Ihrem The Vue Instanz/decalaration definieren

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

2. Jetzt in Ihrer Komponente Sie Ereignisse mit

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

3. emittieren kann, und hören Sie tun

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