vuejs에서 전역적으로 변수를 사용자 정의하는 방법

방법: 전용 전역 변수 모듈 파일을 설정합니다. 모듈에서 일부 변수의 초기 상태를 정의하고 "export default"로 노출한 다음 "main.js"의 "Vue.prototype"을 사용하여 마운트합니다. vue 인스턴스 또는 다른 곳에서 사용해야 할 경우 이 모듈을 도입하면 됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

전역 변수 정의

원리:

전용 전역 변수 모듈 파일을 설정하고, 모듈에서 변수의 일부 초기 상태를 정의하고, 내보내기 기본값으로 노출하고, main.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:

필요한 경우 전역 변수 모듈 파일을 참조한 후 파일에 있는 변수 이름을 통해 전역 변수 매개 변수 값을 가져옵니다.

text1.vue 컴포넌트에 사용:

<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>

Vuex는 전역 변수도 설정할 수 있습니다

관련 권장 사항: "vue.js tutorial"

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