Wie übergibt man eine reaktive Variable in die Vue.js-Komponente?

Question

Ich kann nicht herausfinden, wie man eine reaktive Variable in Vue.js-Komponente ohne HTML-Vorlagen übergeben.

Ich benutze diesen Code für die Komponente Rendering

var App = require('./app.vue').default; 
var test = 'hey!'; 

var app = new Vue({ 
    el: '#app', 
    data: { 
     message: test 
    }, 
    components: { App }, 
    render: h => h('app', { props: {message: test}}) 
}) 

Es funktioniert gut, und meine Komponente macht mit ‚Hey‘, aber das Problem, dass ich mit Blick auf bin, ist die Tatsache, dass, wenn ich ändern

var test = 'hey!'; 

Variable (in der Entwicklerkonsole des Browsers), dann scheint sich nichts in meiner Komponente zu ändern, es wird nur 'hey' gerendert.

Wie ich verstehe, würde ich

app.message 

in meine Komponente passieren müssen, um es reaktiv zu machen, aber wie würde ich mich über das tun dies? Oder gibt es vielleicht einen anderen Weg, dies zu erreichen?

Ich habe es eingerichtet, um mit Typoskript und einzelnen Dateikomponenten in Webpack zu arbeiten.

Answer 1

konnte ich eine Lösung finden, die für jedermann mit einem ähnlichen Problem - Sie zu einer Funktion Ihrer machen ändern müssen, wie diese

var App = require('./app.vue').default; 

var app = new Vue({ 
    el: '#app', 
    data: { 
     message: 'hey!' 
    }, 
    components: { App }, 
    render (h) { 
     return h('app', { 
      props: { 
       message: this.message 
      } 
     }) 
    } 
}) 

Sie diese unten hinzufügen können es in Entwickler Ihren Browser zu testen

Konsole

window['vue_test'] = app; 

dann in Entwicklerkonsole können Sie schreiben, gerade in

vue_test.message = 'new value!' 

und HTML Dom sollten mit Änderungen aktualisiert werden. Nur Dateneigenschaften sind reaktiv und deshalb hat es vorher mit dieser Variablen nicht funktioniert:

var test = 'hey!';