vue.js에서 전역 변수를 선언하는 방법

vue.js에서 전역 변수를 선언하는 방법: 먼저 전용 전역 변수 모듈 파일을 설정하고 모듈에서 변수의 초기 상태를 정의한 다음 내보내기 기본값을 사용하여 마지막으로 [Vue.prototype]을 사용합니다. [main.js] vue 인스턴스에 마운트하고 모듈을 소개합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue2.9 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

vue.js 전역 변수 선언 방법:

전역 변수 정의

원리: 전용 전역 변수 모듈 파일을 설정하고, 모듈에서 변수의 일부 초기 상태를 정의하고, 기본에서 내보내기 기본값을 사용하여 노출합니다. .js Vue.prototype을 사용하여 vue 인스턴스에 마운트하거나 다른 곳에서 사용해야 하는 경우 이 모듈을 도입하면 됩니다.

전역 변수 모듈 파일:

Global.vue 파일

<script>
const serverSrc=&#39;www.baidu.com&#39;;
const token=&#39;12345678&#39;;
const hasEnter=false;
const userSite="中国钓鱼岛";
  export default
  {
    userSite,//用户地址
    token,//用户token身份
    serverSrc,//服务器地址
    hasEnter,//用户登录状态
  }
</script>

방법 1: 필요한 경우 전역 변수 모듈 파일을 참조한 후, 파일에 있는 변수 이름을 통해 전역 변수 매개 변수 값을 얻습니다.

    <template>
        <div>{{ token }}</div>
    </template>
     
    <script>
    import global_ from &#39;../../components/Global&#39;//引用模块进来
    export default {
     name: &#39;text&#39;,
    data () {
        return {
             token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
            }
        }
    }
    </script>
    <style scoped>
    </style>

방법 2: 프로그램 입구의 main.js 파일에서 위의 Global.vue 파일을 Vue.prototype에 마운트합니다.

    import global_ from './components/Global'//引用文件
    Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

그러면 전체 프로젝트에서 Global.vue 모듈 파일을 참조할 필요가 없습니다. 이를 통해 Global 파일에 정의된 전역 변수에 직접 접근할 수 있습니다.

text2.vue:

<template>
    <div>{{ token }}</div>
</template>
<script>
    export default {
        name: &#39;text&#39;,
        data () {
            return {
                 token:this.GLOBAL.token,//直接通过this访问全局变量。
                }
            }
    }
</script>
<style scoped>
</style>

관련 무료 학습 권장사항: JavaScript(동영상)

위 내용은 vue.js에서 전역 변수를 선언하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!