>  기사  >  웹 프론트엔드  >  vuejs에서 전역 메소드를 생성하고 호출하는 방법

vuejs에서 전역 메소드를 생성하고 호출하는 방법

青灯夜游
青灯夜游원래의
2021-09-26 18:30:044445검색

전역 메소드 생성 및 호출: 1. vue 프로젝트의 src 디렉터리에 있는 파일에서 메소드를 사용자 정의합니다. 2. "main.js" 파일의 import 문을 사용하여 사용자 정의 메소드를 도입하고 해당 메소드를 마운트합니다. 3. 필요한 페이지에서 "$vue instance.method name()" 문을 사용하여 메서드를 호출합니다.

vuejs에서 전역 메소드를 생성하고 호출하는 방법

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

Vue.js는 전역 메서드를 생성하고 호출합니다

vue 프로젝트에서 먼저 src의 모든 파일 아래에 메서드를 사용자 정의합니다. 예를 들어 다음과 같습니다

  transNum (num) {
    if (typeof (num) === 'undefined') {
      return 0
    } else {
      let oldNum = num.toString().trim()
      let len = oldNum.length
      if (len <= 3) {
        return num
      } else {
        let newNum = oldNum.substr(0, len - 3) + &#39;.&#39; + oldNum.charAt(len - 3) + &#39;k&#39;
        return newNum
      }
    }
  }

방법 1: Vue 인스턴스에 마운트

예: vue 프로젝트의 main.js 파일에 이 메서드를 도입하고 이 메서드를 vue 인스턴스에 마운트합니다. main.js 파일

import myutil from &#39;@/common/utils/util.js&#39;

Vue.prototype.$myutil = myutil

에 다음 코드를 추가하면

$myutil.transNum(num)

를 직접 사용할 수 있습니다. 방법 2: 가져오기를 통해

을 가져오고 필요한 파일의

import util from &#39;@/common/utils/util.js&#39;&#39;

메서드를 호출합니다. call this method

util.transNum(num)

참고:

메서드 호출을 {{}}에 작성하려면 첫 번째 방법을 통해서만 메서드를 소개할 수 있습니다. 구체적인 이유는 vue의 수명 주기와 관련이 있으므로 다루지 않겠습니다. 세부 사항으로.

관련 추천: "vue.js Tutorial"

위 내용은 vuejs에서 전역 메소드를 생성하고 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.