[VUEJS] 공통함수 만들고 적용하는 방법

Pixabay로부터 입수된 Gerd Altmann님의 이미지 입니다.

오늘은  Vuejs 에서 공통으로 사용할 함수를 만드는 방법에 대해서 설명 드리겠습니다.

목차

1. 공통으로 사용할 js 생성
2. 생성한 함수를 VUE에서 사용하도록 셋팅
3. 다른 component 에서 호출하여 사용하는 방법

 

1. 공통으로 사용할 JS 생성 

개발팀의 취향에 따라서 파일을 하나 생성합니다. 
모듈별로 생성할 것인지 아님 정말 validate 용으로 만들건지에 따라서 파일명을 결정해서 생성해주세요.
저는 fn_common.js 로 해서 생성을 했습니다. 
백문이 불여일견이라서 아래에 해당 소스를 보시면 아실꺼에요 

export default{
    install(Vue){ 
        //날짜 비교 함수
        Vue.prototype.$dateValidation = function(prevDate, currentDate){
            if(prevDate > currentDate) {
                //console.log(prevDate,currentDate);
                return false;
            }
            else{
                return true;
            }
        }
    }
}

위의 소스를 보시면 Vue.prototype.$함수명 = function(parameter...){}이런식으로 정의해서 사용하시면 됩니다. 

2. 생성한 함수를 VUE에서 사용하도록 셋팅

공통함수를 사용하려면 import를 하고 Vue가 사용하도록 해야합니다.
아래에 main.js에 설정한 것을 공개해드립니다.

import common from "./common/fn_common";

Vue.use(common);

3. 다른 component 에서 호출하여 사용하는 방법

사용하려는 Vue에서 this.$functionName으로 호출하시면 됩니다.
하단에 위의 소스를 가지고 비교한 것을 보여드릴께요.

 fnDateCheck(prevDate, currentDate){
                if(this.$dateValidation(prevDate, currentDate)){
                    console.log('success');
                } else {
                    alert("원하시는 문구 ");
                }
            }

위의 예시처럼 사용을 하시면 편리하게 공통함수를 사용하실 수 있습니다. 

이 글이 도움이 되셨으면 좋겠습니다. ^^