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

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

coldplay.xixi

풀어 주다： 2023-01-13 00:44:58

원래의

6297명이 탐색했습니다.

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

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

이 튜토리얼의 운영 환경: 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，里面只有<script>

<!--设置全局变量-->
<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 &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
import fastclick from &#39;fastclick&#39;
import global_ from &#39;./components/Global.vue&#39;  //引入全局组件
Vue.prototype.GLOBAL = global_;  //修改原型
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: &#39;#app&#39;,  
  router, 
  components: { App },
  template: &#39;<App/>&#39;
})

로그인 후 복사

步骤三、使用

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

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