Question

我有main.js和app.vue文件

主js文件内部看起来像这样

var a = 1;
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App)
})

在App.vue文件中的

我想要console.log（a）返回错误a没有定义为什么？怎么了？

Answer 1

您需要导出变量，然后将其导入到您想要的另一个文件中。最好的方法是将变量a放在自己的模块文件中。这允许您避免使用全局变量，这几乎否定了模块的目的！

a.js：

export const a = 'foo'

App.vue：

<script>
  import { a } from './a.js'
  console.log(a) // foo

  console.log(1)
  export function log3() {
    console.log(3)
  }
</script>

main.js：

import { log3, default as App } from './App.vue'
console.log(2)
log3()

new Vue({
  el: '#app',
  render: h => h(App)
})

import { a } from './a.js'
console.log(a) // foo

以下是将记录到控制台的内容：

'foo'（来自App.vue）
1（来自App.vue）
2（来自main.js）
3（来自main.js，从App.vue调用函数log3）
'foo'（来自main.js）

现在，App.vue和main.js都可以访问a，因为他们已经明确导入了它。 App.vue可以访问a的事实与main.js也可以访问a这一事实无关。

Answer 2

您可以做的最简单的事情是定义data属性insode root instance，并从组件中将它们作为this.$root.myProperty访问：

＆＃13;

new Vue({
  el: '#app',
  data: {
    myGlobal: 'Hi there'
  },
  components: {
    'child' : {
      template: `<p>{{ text }}</p>`,
      data: function() {
      	return {
          text: this.$root.myGlobal
        }
      }
    }
  }
});

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child></child>
</div>

＆＃13;

另一种选择 - 一个简单的插件作为中央存储：https://stackoverflow.com/a/44517332/7636961

Answer 3

App未在main.js组件中定义，而是直接在{{1}}中定义。

您可能想要使用global variable。（另见this thread for global variable in vuejs）

导入.vue文件

3 个答案: