时间戳

首页 > 解决方案 > 是否可以将 Vue 应用程序部件渲染到多个节点？

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

问题描述

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

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

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

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

标签： javascriptvue.jsvue-routervuex

解决方案

你可以……有点。你可以有多个 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它们都添加到它们中，但这没有什么意义。

推荐阅读