프로젝트에서는 백엔드에서 얻은 웹사이트 서버 주소, 사용자의 로그인 토큰, 사용자의 주소 정보 등 일부 기능과 변수를 재사용해야 하는 경우가 많습니다. 이때 전역 변수와 변수의 물결이 일고 있습니다. 전역 함수를 설정해야 하는데, 이 두 가지 설정은 크게 어렵지도 않고 공통점도 있습니다. 이 글에서는 주로 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을 사용합니다. 전역 변수와 함수를 정의하는 루틴은 기본적으로 동일합니다. . 위 내용은 전역변수와 전역함수에 관한 내용입니다. 이 글을 읽어보시면 도움이 되실 거라 믿습니다.
관련 권장 사항:
PHP에서 전역 변수 global과 $GLOBALS의 차이점에 대해 - WORSHIP Yasa
위 내용은 vue 프로젝트에서 전역 변수 및 전역 함수 메서드 정의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!