Zugriff auf die Variable aus der Haupt-Vue.js-Instanz in der Komponente VM

Question

Hier ist eine sehr einfache Vue-App, die eine Prop von der Haupt-VM an eine Komponente übergibt. Dieser Wert wird über vue-resource in meiner aktuellen Anwendung abgerufen.

https://jsbin.com/tazuyupigi/1/edit?html,output

Natürlich funktioniert es, aber ich bin zu kämpfen, diesen Wert von der Komponente VM selbst zuzugreifen.

https://jsbin.com/hurulavoko/1/edit?html,output

Wie Sie sehen können, zeigt mein Alarm nicht definiert. Wie kann ich das beheben? Scheint ein Problem mit der Reihenfolge der Ausführung, aber compiled() oder created() anstelle von ready() macht keinen Unterschied.

Answer 1

Es ist ein Problem mit der Reihenfolge der Ausführung. Die Haupt-Vue-Instanz ist nicht "bereit", bis die Dinge darin kompiliert wurden. Dies beinhaltet die Komponente hello.

Wenn Sie wissen müssen, dass bar festgelegt wurde, bevor Sie es verwenden, können Sie dies auf verschiedene Arten überwachen. Sie könnten $broadcast ein Ereignis im Elternteil haben, um das Kind wissen zu lassen, dass bar geladen wurde. Oder Sie können eine watch Funktion in der untergeordneten Komponente verwenden, um Änderungen vorzunehmen, wenn bar aktualisiert wird.

Ihr Beispiel, wenn Sie mit $setbar in created() jedoch funktioniert vue-resource Sie gehen eine Verzögerung sowieso haben, so dass Sie für die Tatsache berücksichtigen müssen, dass greeting nicht während des Kindes ready() Funktion bereit sein. Sie müssen entweder Ihre DOM-Struktur so gestalten, dass die greetingundefined ist, oder Sie müssen eine Ereignis- oder watch-Funktion verwenden, um selbst darauf zu warten.

Beispiel mit $broadcast:

Vue.component('hello', { 
    template: 'From hello tag: {{ greeting }}', 
    props: ['greeting'], 
    ready: function() { 

    }, 
    events:{ 
    'bar-ready':function(){ 
     alert(this.greeting) 
    } 
    } 
}); 
new Vue({ 
    el: '#app', 
    created: function() { 
     this.$http.get('/path') 
      .then(function(response){ 
       this.$set('bar',response.data); 
       this.$broadcast('bar-ready') 
      }.bind(this)) 
    } 
}); 

$broadcast docs: https://vuejs.org/api/#vm-broadcast