我有一个Vue组件需要嵌入到几个地方的大型遗留系统(而不是Vue)中 . 该组件根据数据库记录ID数组生成一些AJAX请求并显示信息,它通常在页面加载时接收 . 该数组由服务器直接嵌入到页面模板中,并作为props传递给组件,如下所示:
let config = {
records: {{ template_code_outputting_array }},
...otherConfigOptions
}
let app = new Vue({
el: '#app',
store,
render: h => h(ComponentName, {
props: config
})
})
我的问题是,在其中一个需要嵌入的屏幕上,数据库记录可以由用户使用搜索和添加类型的AJAX接口动态选择(而不是在页面加载时预先设置),所以我需要保持组件与用户的选择同步,以便可以根据需要重新呈现 .
我有一个有效的解决方案,但它远非理想;每当用户对其选择进行一些更改时,我正在直接调用组件上的方法,传递新选择,以便组件可以更新其自己的内部副本:
app.$children[0].recordsChanged(newSelection)
但显然这不是反应性的,而且感觉有点像hacky . 我觉得我不应该直接寻址一个组件,而我所调用的功能仅供外部使用;组件内部没有任何内容使用它 .
我已经尝试将数据中的值绑定到全局变量(这也没有多少选择),然后添加一个watch方法来触发更改时的重新呈现 . 显然,标量值不是通过值而不是引用,但将它们包装在对象中似乎不会触发监视方法或任何反应 .
有没有最好的做法,或者我目前的做法是我能想到的最好的方法?
1 回答
事件总线(由AfikDeri在评论中建议)是一个很好的解决方案 . 它提供了一个简单的界面 .
也可以对数据进行反应,with some caveats . 用于初始化数据项的 Object 本身将被激活 . 如果更改数组do so in the approved ways的内容,您应该看到Vue中的更改 .