反応変数をVue.jsコンポーネントに渡すにはどうすればいいですか？

Question

HTMLテンプレートを使用せずに反応変数をVue.jsコンポーネントに渡す方法がわかりません。

私はそれが正常に動作し、私のコンポーネントは「ちょっと」でレンダリングし、私は直面しています問題は、私は

var test = 'hey!'; 

を変更するたびにいるという事実である

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}}) 
}) 

をレンダリングコンポーネントにこのコードを使用

（ブラウザのデベロッパーコンソールで）変数が変わってもコンポーネント内で何も変わらないように見えます。

私は理解したように、私はそれが反応性にするために、私のコンポーネントに

app.message 

に合格する必要がありますが、どのように私はこれをやって行くのでしょうか？あるいは、これを達成するための他の方法がありますか？

WebpackのTypescriptと単一のファイルコンポーネントで動作するように設定しました。

Answer 1

私は同様の問題を持つ人のために、解決策を見つけることができました - あなたはあなたの関数にレンダリング変更する必要があり、この

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 
      } 
     }) 
    } 
}) 

のように、あなたのブラウザの開発者にそれをテストするには、以下にこれを追加することができますコンソール

window['vue_test'] = app; 

は、デベロッパーコンソールであなただけで入力することができます

vue_test.message = 'new value!' 

とHTML Domは変更を加えて更新する必要があります。データプロパティのみが反応します。そのため、以前はこの変数では機能しませんでした：

var test = 'hey!';