vue 프로젝트에서 전역 변수 및 전역 함수 메서드 정의-JS 튜토리얼-php.cn

vue 프로젝트에서 전역 변수 및 전역 함수 메서드 정의

小云云

풀어 주다： 2018-01-03 13:30:40

원래의

2552명이 탐색했습니다.

프로젝트에서는 백엔드에서 얻은 웹사이트 서버 주소, 사용자의 로그인 토큰, 사용자의 주소 정보 등 일부 기능과 변수를 재사용해야 하는 경우가 많습니다. 이때 전역 변수와 변수의 물결이 일고 있습니다. 전역 함수를 설정해야 하는데, 이 두 가지 설정은 크게 어렵지도 않고 공통점도 있습니다. 이 글에서는 주로 Vue 프로젝트에서 전역 변수와 전역 함수를 정의하는 방법을 소개합니다. 특정 참조 가치가 있습니다. 관심 있는 친구들이 참조할 수 있으므로 모든 사람에게 도움이 되기를 바랍니다.

전역 변수 정의

원리:

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

전역 변수 모듈 파일:

Global.vue 파일:

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

로그인 후 복사

사용 방법 1:

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

text1.vue 컴포넌트에 사용:

<template>
  <p>{{ token }}</p>
</template>

<script>
import global_ from '../../components/Global'//引用模块进来
export default {
 name: 'text',
data () {
  return {
     token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
    }
  }
}
</script>
<style lang="scss" 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>
  <p>{{ token }}</p>
</template>

<script>
export default {
 name: 'text',
data () {
  return {
     token:this.GLOBAL.token,//直接通过this访问全局变量。
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

로그인 후 복사

Vuex에서는 전역 변수를 설정할 수도 있습니다.

vuex를 사용하여 전역 변수를 저장하면 되는데, 여기에는 많은 것들이 있고 관심 있는 친구들은 스스로 정보를 확인하고 해볼 수 있습니다. ,

전역 함수 정의

Principle

새 모듈 파일을 만든 다음 main.js의 Vue.prototype을 통해 Vue 인스턴스에 함수를 마운트하고 this.function 이름을 통해 함수를 실행합니다.

1. main.js에 직접 함수 작성

간단한 함수는 main.js에 직접 작성 가능

Vue.prototype.changeData = function (){//changeData是函数名
 alert('执行成功');
}

로그인 후 복사

컴포넌트 호출:

this.changeData();//直接通过this运行函数

로그인 후 복사

2. 모듈 파일을 작성하여 main.js에 마운트합니다.

base.js 파일, 파일 위치는 쉽게 참조할 수 있도록 main.js와 동일한 레벨에 배치할 수 있습니다.

exports.install = function (Vue, options) {
  Vue.prototype.text1 = function (){//全局函数1
  alert('执行成功1');
  };
  Vue.prototype.text2 = function (){//全局函数2
  alert('执行成功2');
  };
};

로그인 후 복사

main.js 항목 파일:

import base from './base'//引用
  Vue.use(base);//将全局函数当做插件来进行注册

로그인 후 복사

컴포넌트 호출:

this.text1();
  this.text2();

로그인 후 복사

Later

위는 전역 변수 정의 방법 여기에서 전역 변수와 전역 함수는 vue 프로젝트에만 국한되지 않습니다. vue-cli는 모듈화를 위해 webpack을 사용합니다. 전역 변수와 함수를 정의하는 루틴은 기본적으로 동일합니다. . 위 내용은 전역변수와 전역함수에 관한 내용입니다. 이 글을 읽어보시면 도움이 되실 거라 믿습니다.