javascript - 如何将 react 变量传递到 Vue.js 组件中？

Question

我不知道如何在不使用 HTML 模板的情况下将 react 变量传递到 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

进入我的组件以使其具有反应性，但我该如何去做呢？或者也许还有其他方法可以实现这一目标？

我将其设置为与 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 应该随着更改而更新。只有数据属性是 react 性的，这就是为什么它之前无法使用此变量:

var test = 'hey!';