我的部分如何访问 Vue 中的主要数据对象？答案

【问题标题】：How can my partials access the main data object in Vue?我的部分如何访问 Vue 中的主要数据对象？
【发布时间】：2018-02-07 08:21:16
【问题描述】：

我正在使用 Vue Router 来路由外部 .vue 文件并将它们与 webpack 绑定在一起。我有一个定义我的 Vue 实例的 main.js 对象。

var vm = new Vue({
  el: '#app',
  router,
  //render: h => h(App),
  data:{
    msg: 'Hello there'
  }
});

我的部分将自己导出为模块，但我希望我的部分能够从 main.js 访问数据，但他们只能从自己的数据对象访问数据。

export default {
  name: 'foo',
  data () {
    return {
      msg: 'You have no brain'
    }
  }
}

所以从那个部分 {{msg}} 中说你没有大脑，但我希望它在那里说你好。我该怎么做？

【问题讨论】：

【解决方案1】：

没有简单的方法可以只使用另一个文件中的变量。是Vue，所以你需要阅读如何连接Components。使用Properties 对您也有帮助。

请记住，所有这些都与您如何将代码分成文件无关。这是一个完整的生态系统，你需要在 Vue 中连接东西，而不是在 JS 文件中:)

【讨论】：

【解决方案2】：

当您的应用程序增长并且您肯定会获得多个“相互依赖”的值等时，您可能会发现这些方法不是很“可读”。

我建议您研究“状态管理”——在 Vue 的示例中，可能是 Vuex (https://vuex.vuejs.org/en/intro.html)，因为您的所有中型到大型应用程序很快就会需要它。

否则，您可以使用“事件总线”通信 (https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication)。但你可能很快就会“长大”...

希望对你有帮助...

【讨论】：