vue怎么定义全局变量

在 Vue 中，可以使用 Vue.prototype.$xxx = xxx 来定义全局变量。

例如，在 main.js 中定义：

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$globalVar = '我是全局变量'

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

然后在任意组件中使用：

<template>
  <div>{{ $globalVar }}</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$globalVar) // 输出：我是全局变量
  }
}
</script>

相关问题

vue定义全局变量 完整例子

在Vue中定义全局变量可以通过Vue.prototype来实现。下面是一个完整的例子：

// main.js

import Vue from 'vue'

Vue.prototype.$myGlobal = '这是一个全局变量'

// App.vue

<template>
  <div>
    <p>{{ $myGlobal }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$myGlobal) // 输出：这是一个全局变量
  }
}
</script>

在main.js中，我们通过Vue.prototype定义了一个名为$myGlobal的全局变量。在其他组件中，我们可以通过`this.$myGlobal`来访问这个全局变量。在App.vue中，我们就通过`{{ $myGlobal }}`来展示它的值。在mounted钩子函数中，我们也可以直接通过`this.$myGlobal`来访问它的值。

vue2定义全局变量

在Vue 2中，可以通过以下方式定义全局变量：

1. 使用Vue.prototype来扩展Vue实例，从而创建全局变量。在main.js中引入需要使用的模块，例如：

import util from '@/util/enum-data'
Vue.prototype.$util = util

然后在其他组件中可以直接使用`this.$util`来访问该全局变量。

2. 创建一个独立的文件（例如base.js），在其中定义需要的全局变量或方法，并将其导出。在其他组件中通过`import`语句导入该文件，例如：

// base.js
export const GlobalStatus = {
  CertifyTypeColumns: []
}

// main.js
import { GlobalStatus } from './base.js'
Vue.prototype.$GlobalStatus = GlobalStatus

这样就可以在组件中通过`this.$GlobalStatus.CertifyTypeColumns`来访问该全局变量了。

需要注意的是，如果使用了第一种方法，要确保在main.js中正确引入了需要使用的模块。如果使用了第二种方法，则要保证在所有组件中都能访问到该模块所导出的全局变量或方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>