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

Lösung:

Bei Vue 2.0 sind die Dinge etwas anders, da die Übertragung eingestellt wurde. Die Vue-Dokumentation spricht über die Verwendung eines zentralen Ereignisbusses, um dies zu erreichen. Hier ist, wie Sie es könnten;

1. Definieren Sie einen zentralen Event Hub. Also in Ihrer The Vue Instanz/Deklaration definieren

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

2. Jetzt können Sie in Ihrer Komponente Ereignisse mit ausgeben

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

3. Und um dir zuzuhören

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

Verwenden Sie dieses kleine Plugin, wenn Sie Daten zwischen vielen verschachtelten Komponenten teilen möchten:

Vue.use(VueGlobalVariable, {
  globals: {
    user: new User('testuser'),
    ....
  },
});

verwenden $user in jeder Komponente!

Hinweis: Diese Antwort gilt nur für Vue 1

Sie könnten beispielsweise eine Übertragung von der Root-Vue-Instanz aus durchführen. this.$root gibt Ihnen Zugriff auf die Root-Komponente in Ihrer aktuellen vue-Instanz. So wird es bei seinen Kindern 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örst du auf die show-results:users Veranstaltung in Ihrem show-results Komponente:

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

Natürlich können Sie der Veranstaltung einen beliebigen Namen geben.

---

---

Anderer Beitrag