Skip to content

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.

Click to rate this post!
[Total: 0 Average: 0]


Tags : /

Anderer Beitrag

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.