是否可以将 Vue 应用程序部件渲染到多个节点？

Question

我有一个非常复杂的页面，现在是静态的。我想使用 Vue 使页面的某些部分成为动态的。后来我想把所有的页面都变成一个SPA，但现在这不是一个选项。

问题是 - 是否可以制作一个 Vue 应用程序，将其组件呈现到页面的不同部分，而不使整个页面成为 Vue 的元素？像这样的：

new Vue({
    store,
    router,
    render: {
      '#header': ReviewsSummaryComponent,
      '#score': ScoreComponent,
      '#reviews': ReviewsComponent,
      '#compliments': ComplimentsComponent
    }
  })

这里最重要的部分是我希望他们共享公共商店、路线和（非强制性）父级。这在 Vue 中可行吗？

Answer 1

你可以……有点。你可以有多个 Vue 实例，它们将通过 store 连接：

new Vue({
  el: "#header",
  store,
  components: { ReviewsSummaryComponent },
  template: "<ReviewsSummaryComponent/>"
});
new Vue({
  el: "#score",
  store,
  components: { ScoreComponent },
  template: "<ScoreComponent/>"
});
new Vue({
  el: "#reviews",
  store,
  components: { ReviewsComponent },
  template: "<ReviewsComponent/>"
});
new Vue({
  el: "#compliments",
  store,
  components: { ComplimentsComponent },
  template: "<ComplimentsComponent/>"
});

如您所见，我只添加了store。从技术上讲，您也可以将router 添加到它们中，但这没什么意义。