Question

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

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

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

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

Answer 1

你可以......有点儿。您可以拥有多个Vue实例，这些实例将通过商店连接：

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添加到它们中，但无论如何这都没有意义。

是否可以将Vue应用程序部件呈现给多个节点？

1 个答案: