Vue Kind Daten von untergeordneten Komponente zu Komponente zu übergeben

Question

So habe ich eine Struktur wie diese

<Root> 
<HomeNav> router-view 
<RouterLink> 
<RouterLink> 
<RouterLink> 
<RouterLink> 
<RouterLink> 
<Home> router-view 
<RouterLink> 

Nun wird jeder HomeNav Router-Links, indem die Daten in der Komponente Ändern von Daten zu root vorbei, aber das bedeutet, dass ich müssen diese Daten binden:

 <router-view v-bind:title="title" v-bind:text="text" v-bind:youtube="youtube" v-bind:transition="transition"></router-view> 

und die Funktionen laufen auf erstellt und aktualisiert:

new Vue({ 
    el: '#app', 
    router, 
    data: Variables, 
    created: function() { 
    path = pathname.pathname(); 
    pathLenght = pathname.countPathLenght(path); 
    this.homeText(this.data); 
    }, 
    updated: function() { 
    path = pathname.pathname(); 
    pathLenght = pathname.countPathLenght(path); 
    Pace.restart() 
    this.homeText(this.data); 
    }, 
    methods: { 
    homeText(data) { 
     data = toogleData.checkText(data); 
     this.title = data[0]; 
     this.text = data[1]; 
     this.youtube = data[2]; 
    } 
    } 
}) 

Das Problem ist jedoch, dass ich diese Daten nicht für alle Routen benötige, und ich muss diese Funktion ".homeText" nicht auslösen oder diese spezifischen Daten an jedes einzelne root binden. Es wird nur auf der Homepage benötigt, also die erste Route.

Die Frage ist also, ist es möglich, Daten von HomeNav-Komponente direkt zu Home-Komponente übergeben, ohne all diesen Code in globalen (Root) -Komponente?

Answer 1

Dies ist ein großartiger Ort für die MessagePump, die die VueJs-Dokumentation vorschlägt. Es ist im Wesentlichen ein ungebundenes Vue-Objekt, das als Vermittler zwischen Objekten fungiert. Auf diese Weise können Sie Ereignisse auf der Pumpe definieren und aufrufen, die an die entsprechende Komponente weitergeleitet werden.

window.MessagePump = new Vue({}); 

Vue.Component(
    'HomeNav', 
    { 
     ... 
     data: function() { 
      return { 
       homeText: 'something' 
      } 
     }, 
     ... 
     mounted: function() { 
      var thisArg = this 
      MessagePump.$on(
       'homeTextChanged', 
       function(newText) { 
        thisArg.homeText = newText; 
       } 
      ); 
     } 
     ... 
    } 
); 

Vue.Component(
    'Home', 
    { 
     ... 
     mounted: function() { 
      MessagePump.$emit('homeTextChanged', 'To This'); 
     } 
     ... 
    } 
); 

Dies wird das Ereignis und die Änderung von HomeText von 'etwas' zu 'To This' auslösen.