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

它工作正常，我的组件呈现＆＃39;嘿＆＃39;但我面临的问题是每当我改变时

var test = 'hey!';

变量（在浏览器的开发者控制台中）然后我的组件似乎没有任何变化，它只是渲染＆＃39;嘿＆＃39;。

据我了解，我必须通过

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

如何将反应变量传递给Vue.js组件？

1 个答案: