如何在导出之外访问组件数据答案

【问题标题】：How to access component data outside export如何在导出之外访问组件数据
【发布时间】：2018-10-31 16:28:39
【问题描述】：

我是 Vue 的新手，在我们开始我们的项目之前我正在尝试，到目前为止我遇到了一个问题。

通常当我们创建一个像“var app = new Vue ... e.t.c”这样的实例时，我们可以访问它是像 app.data 这样的数据，但是在组件中呢像这样

<template>
  <div id="app">
    Hello {{msg}}

  </div>
</template>

<script>   

export default {
  name: "App",  
  data() {
    return { 
        msg: "World"
    }  
}

}

console.log(this.msg)

</script>

我只想访问 msg 但到目前为止我无法访问，也尝试过 this.msg 也许我错过了一些东西。目前我不想使用 Vuex，我认为这对于一个不那么复杂的小型应用程序来说是多余的。

那么我如何访问它？

【问题讨论】：

可以，但我不建议这样做。这是anti-pattern 的一个示例，您应该在这里重新考虑您的架构。
Ohgodwhy 什么是解决方案？ Vuex？事件总线？
您能否澄清一下“访问味精”是什么意思，您要归档什么，
Bob Fanger 试图输出 msg 值“World”但我收到此错误无法读取未定义的属性“msg”

标签： javascript vue.js

【解决方案1】：

我不确定 Vue 是否有任何限制，但从 javascript 的角度来看，你不能这样做

 const data = {
   name: "App",  
   data() {
       return { 
         msg: "World"
      }  
   }

}

export default data;

const msg = app.data();

【讨论】：

在 Vue 中，每个新组件都会调用 data() 来初始化它的内部状态。此解决方案显示新组件的数据是什么，但它不访问特定组件实例的 msg。