首先声明Vue使用全局变量的方法有很多,以下只是个人觉得比较简洁的2种。其中两者的第一步操作相同,即:

创建全局变量文件Global.vue,内容如下:

<script>
    const name = 'ZhangSan'; //名称
    const address = 'No.20, Taihu Road'; //地址

    export default {
        name,
        address
    }
</script>

方法1:在main.js中直接将全局变量挂载到Vue.prototype

import global from '../components/xx/Global'
Vue.prototype.GLOBAL = global;

使用时不用任何多余操作,直接调用this.GLOBAL.name即可。

方法2:在需要使用全局变量的页面引入global再使用

import global from '../components/xx/Global'

data() {

        return {

                userName: global.name,

                userAddress: global.address

        }

}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐