vue.js를 사용하여 전역 변수를 정의하는 방법

vue.js를 사용하여 전역 변수를 정의하는 방법: 먼저 별도의 전역 변수 모듈 파일을 만들고 모듈에서 변수의 초기 상태를 정의한 다음 이를 [main.js]에 도입하고 [를 통해 vue에 마운트합니다. Vue.prototype] 위의 예입니다.

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

【추천 관련 글: vue.js】

vue.js를 사용하여 전역 변수를 정의하는 방법:

원리:

1 새로운 전역 변수 모듈 파일을 별도로 생성하고 일부 초기 항목을 정의합니다. 모듈 상태의 변수는 내보내기 기본값을 사용하여 노출됩니다.

2. main.js에 도입하고 Vue.prototype을 통해 vue 인스턴스에 마운트합니다. 다른 모듈 파일에서 사용하기 위해 Vue.prototype挂载到vue实例上面。供其他模块文件使用； 

3. 或者直接引入到需要的模块文件中使用；

步骤一、定义一个全局组件 Global.vue，里面只有3f1c4e4b6b16bbbd69b2ee476dc4f83a

<!--设置全局变量-->
<script>
    //接口地址
    const BASE_URL = &#39;http://118.189.105.152:7181/qianzhang-transf/index/&#39;; //定义全局接口地址
    //请求头部       
    const reqHead = { 
        "transDate": "20180816",
        "encryptFlag": "1",
        "seqNo": "2018081628507127",
        "serviceID": "loanLmtQryHXMKL",
        "transTime": "174341",
        "channelID": "netbank"
    }
    export default {   //将常量暴露出去
        BASE_URL,
        reqHead,
    }
</script>

步骤二、修改原型链

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import global_ from './components/Global.vue'  //引入全局组件
Vue.prototype.GLOBAL = global_;  //修改原型
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',  
  router, 
  components: { App },
  template: &#39;<App/>&#39;
})

步骤三、使用

在需要 的vue页面直接使用 this.GLOBAL.BASE_URL

3. 또는 사용하기 위해 필요한 모듈 파일에 직접 도입하기

1단계. 3f1c4e4b6b16bbbd69b2ee476dc4f83a만 포함하는 전역 구성 요소 정의 rrreee Step 2. 프로토타입 체인 수정rrreeeStep 3. Use this.GLOBAL.BASE_URL을 필요한 vue 페이지에서 직접 사용하여 정의된 상수 값 가져오기

관련 무료 학습 추천 : 🎜🎜🎜javascript🎜🎜🎜(동영상)🎜🎜🎜

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