Vue에서 전역 변수와 전역 함수를 정의하고 사용하는 방법은 무엇입니까? (코드 포함)

이 글에서는 Vue에서 전역 변수와 전역 함수를 정의하고 사용하는 방법을 설명합니다. (코드 첨부) 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 변수를 정의하고 전역적으로 사용하세요

원칙:
1. 새로운 전역 변수 모듈 파일을 별도로 생성하고, 모듈에서 변수의 일부 초기 상태를 정의하고, 기본값 내보내기를 사용하여 이를 노출합니다.
2. 이를 main.js에 도입하고 Vue.prototype을 통해 vue 인스턴스에 마운트합니다. 다른 모듈 파일에서 사용하기 위해
3. 또는 사용을 위해 필요한 모듈 파일에 직접 삽입합니다.

1단계. 변수를 저장할 새 global_variable.js 파일을 만듭니다.

const baseURL = 'www.baidu.com'const token = '123456'const userSite = '林花落了春红，太匆匆'export default {
  baseURL,
  token,
  userSite
}

• 방법 1: 사용해야 하는 모듈 파일에서 (로컬 참조)를 사용합니다. 예제는 다음과 같습니다global_variable.js文件，用于存放变量，示例如下：

  // param为传入参数
  function packageFunc (param) {
    alert(param)
  }
  
  export default {  // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
    install: function (Vue) {
      Vue.prototype.global_func = (param) => packageFunc(param)
    }
  }

  • 方法1：在需要使用的模块文件中使用（局部引用），示例如下

  

  • 方法2：全局使用，示例如下：

  1、将global_variable.js文件引入main.js文件，并使用Vue.prototype挂在至vue实例上，示例如下：
  

  2、在需要使用的模块文件中使用(无需引入，直接通过this使用)，示例如下：

  二、定义函数，并全局使用

  原理：

  新建一个模块文件，然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面，通过this.输出的函数名，来运行函数。

  方法1. 在main.js里面直接写函数

  简单的函数可以直接在main.js里面直接写，示例如下：
  

  方法2. 新建一个模块文件，挂载到main.js上面

  项目目录如下
  

  1、global_func.js文件中代码示例如下：

  rrreee

  2、main.js文件中代码示例如下：
  

  3、在需要调用的模块文件中使用this.输出的函数名
  

  • 방법 2: 전역 사용, 예시는 다음과 같습니다:

  1. 바꾸기 global_variable.js 파일은 main.js 파일을 소개하고 Vue.prototype을 사용하여 vue 인스턴스를 유지합니다.
  

  2. 사용해야 하는 모듈 파일에서 사용(소개할 필요 없이 이를 통해 직접 사용), 예시는 다음과 같습니다. 둘째, 함수를 정의하고 전역적으로 사용하세요

  🎜🎜Principle:🎜🎜🎜새 모듈 파일 하나를 만든 다음 main.js의 Vue.prototype을 통해 Vue 인스턴스에 함수를 마운트하고 이에 의해 출력된 함수 이름을 통해 함수. 🎜🎜🎜방법 1. main.js에 직접 함수 작성🎜🎜🎜간단한 함수는 main.js에 직접 작성할 수 있습니다. 예시는 다음과 같습니다. 🎜🎜 🎜🎜방법 2. 새 모듈 파일을 생성하면 main.js에 마운트됩니다. 프로젝트 디렉터리는 다음과 같습니다. L5L2T/fontsize /400/fill/I0JBQkFCMA==/dissolve/70" alt="여기에 그림 설명 쓰기" title=""/>🎜🎜 1. global_func.js 파일의 코드 예시는 다음과 같습니다. 🎜rrreee🎜 2. main.js 파일의 코드 예시는 다음과 같습니다. 🎜🎜🎜3. 호출해야 하는 모듈 파일에 this.Output 함수명 호출, 코드 예시는 다음과 같습니다. 🎜🎜🎜🎜관련 추천 : 🎜🎜🎜vue 전체 분석--Vue+Vue-router+Vuex+axios🎜🎜🎜🎜🎜vue-cli vue 플러그인 예제 작성🎜🎜

  위 내용은 Vue에서 전역 변수와 전역 함수를 정의하고 사용하는 방법은 무엇입니까? (코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!