如何将反应变量传递给 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!';