vue全局变量定义的两种主要方式

vue全局变量定义的两种方式

比如我有一个VUE脚手架项目,src下有一个components目录,我在目录创建一个global文件夹,再在global文件夹下创建一个global.vue文件,其中主要代码为:

<script>

export default{

site: "my Site Name"

}

</script>

1)需要用时再引用方式

在需要使用的页面中,主要代码片段:

<script>

import GLOBAL from "xx/components/global/global" //引用

export default{

data(){

return{

site: GLOBAL.site //这里会获得全局变量site的值 "my Site Name"

}

}

}

</script>

2)全局配置,不管用不用都存在

全局配置要在main.js里配置

//引入

import Global from "xxxx/components/global/global"

//方式1,通过挂载到vue.prototype里

Vue.prototype.MyGlobal = Global;

使用方式:

在需要使用的vue文件中,通过 this.MyGlobal.site 可以获得全局变量site的值 "my Site Name"

//方式2,通过vue.use方式挂载

Vue.use(Global);

使用方式:

在需要使用的Vue文件中,通过 this.site 可以获得全局变量site的值 "my Site Name"