核心提示：vue全局变量定义的两种方式比如我有一个VUE脚手架项目,src下有一个components目录,我在目录创建一个global文件夹,再在global文件夹下创建一个global.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"
