vue.js如何合并多个配置?

新手上路,请多包涵

问题描述

我在index.html是这样写的:

<html>
<body>
  <div id="app">
    <sidenav>...</sidenav>
    <navbar>...</navbar>
  </div>
<script src="main.js"/>
</body>
</html>

main.js:

const app = new Vue({
  el: "#app",
  data: {...},
  method: {...}
});

在main.js中的vue app里面定义了navbar和sidenav的一些data和method,我想在其他页面都能使用这个配置。
比如在profile.html中:

<html>
<body>
  <div id="app">
    <sidenav>...</sidenav>
    <navbar>...</navbar>
    
    {{ content... }}
  </div>
<script src="profile.js"/>
</body>
</html>

我希望在profile中能使用main.js中的app,但同时在profile又会有自己的vue配置,比如:
profile.js:

const profile = new Vue({
   el: "#app",
   data: {...},
   method: {...}
});

有什么办法可以将两个配置合并呢

自己尝试过的方法

我刚开始将navbar和sidenav写成了单文件组件,但这样在其他页面中就不能使用其中的data和methods了

阅读 2.3k
1 个回答

将 navbar 和 sidenav 的数据保存到 vuex 上去操作。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题