将 Vue 组件数据绑定到外部状态

Question

我有一个 Vue 组件，需要在多个地方嵌入到大型遗留（不是 Vue）系统中。 该组件发出一些 AJAX 请求并根据一组数据库记录 ID 显示信息，它通常在页面加载时接收到这些信息。该数组由服务器直接嵌入到页面模板中，并作为 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。我觉得我不应该直接寻址组件，而我调用的函数仅供外部使用；组件内部没有任何东西使用它。

我尝试将 data 中的值绑定到全局变量（这同样不理想，但我没有太多选择），然后添加一个 watch 方法在更改时触发重新渲染。显然，标量值不起作用，因为它们是按值而不是引用，但是将它们包装在一个对象中似乎也不起作用。它们很好地绑定并采用提供的初始值，但更新对象（直接改变其值或用新值替换对象）似乎不会触发 watch 方法或任何反应。

是否有任何最佳做法可以做到这一点，或者我目前的方法是我所希望的最好的方法吗？

Answer 1

事件总线（如 AfikDeri 在 cmets 中所建议的）是一个很好的解决方案。它提供了一个简单的界面。

也可以对数据进行反应性化处理，with some caveats。用于初始化数据项的 Object 本身将变为反应式。如果改变了你的数组do so in the approved ways，你应该会在你的 Vue 中看到这些变化。

let stuff = [2, 3, 5];

const v = new Vue({
  el: '#app',
  data: {
    reactiveStuff: stuff
  },
  components: {
    myComponent: {
      props: ['arr'],
      template: '<div><div v-for="item in arr">{{item}}</div></div>'
    }
  }
});

setTimeout(() => {
  stuff.push(7);
}, 1200);

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<my-component id="app" :arr="reactiveStuff">
</my-component>