如何跨多个js文件访问Vue.js数据

Question

我的应用中需要两个js文件。第一个（ app.js ）是所有页面/视图将使用的通用js文件。第二个（ page1.js ）是一个页面/视图特定的js文件。

我在 app.js 中实例化一个新的Vue实例，如下所示：

new Vue({
  el : '#app',
  data: {
    balance: 0
  },
  ready: function() {

  },
  methods : {

  },
})

接下来，在 page1.js 文件中，我实例化另一个Vue实例，如下所示：

new Vue({
  el : '#headerSection',
  data: {

  },
  ready: function() {
    console.log(this.balance)
  },
  methods : {

  },
})

但是，当我尝试访问 余额 数据对象时，我收到一个未定义的错误。

在html中我需要 page1.js 之前的 app.js 文件

我怀疑我第二次实例化Vue实例会覆盖第一个实例。

如何在两个js文件中分离Vue元素？

Answer 1

您可能希望使用Vue组件系统而不是多个独立的View Models：

http://vuejs.org/guide/index.html#Components

这允许您创建可以非常轻松地相互交互的View模型层次结构。你可以把它们的javascript放在多个文件中，没有任何问题。

在您的特定情况下，您将创建两个单独的视图模型，这些视图模型在同一个DOM中重叠，但在其他方面彼此不相关。第一个将编译它下面的所有DOM，第二个将没有效果（或者至少是看起来正在发生的那些）。