如何將反應變量傳遞到Vue.js組件中？

Question

我不知道如何在不使用HTML模板的情況下將反應變量傳遞到Vue.js組件中。

我使用此代碼進行組件渲染

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

它工作正常，並且我的組件呈現為“嘿”，但是我面臨的問題是，無論何時我進行更改

var test = 'hey!';

變量（在瀏覽器的開發人員控制台中），那么我的組件似乎沒有任何變化，它只是呈現“嘿”。

據我了解，我將不得不通過

app.message

進入我的組件以使其具有反應性，但是我該怎么做呢？ 也許還有其他方法可以實現這一目標？

我將其設置為與Typescript和Webpack中的單個文件組件一起使用。

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!';