vue.js plugin으로 global method 만들기

DOCUMENT

플러그인 사용법

먼저 플러그인은 제공자와 사용자로 나뉩니다. 이때 두 사이를 이어주는 것이 Vue의 install 메서드입니다. 아래는 각각 예제 코드입니다.

제공자 코드

*// my-plugin.js*MyPlugin.install = function (Vue, options) { */* ... */*}

사용자 코드

import MyPlugin from 'my-plugin'; Vue.use(MyPlugin);







1. export 할 js파일 만들기

emptyCheck.js

const methods = { // 추후 필요한 method를 추가하기 위해 Object로 선언

isEmpty: (value) => { // 필요한 기능 작성

if (value == "" || value == null || value == undefined || (value != null && typeof value == "object" && !Object.keys(value).length)) {

alert('empty!!')

return true

}

else {

alert('not empty!')

return false

}

},

}

export default { // main.js에서 사용하기 위한 export

install (Vue) { // install 호출을 위한 함수 작성 (Vue.use() 에서)

Vue.prototype.$isEmpty = methods.isEmpty // global method type으로 정의

}

}

main.js

2. main에서 import

import EmptyCheck from './js/common/emptyCheck' // 가장 처음 로드되는 main.js 에서 import

3. Vue.use로 등록

Vue.use(EmptyCheck) // EmptyCheck를 use하고 파일 내 install method 실행

component

4. component에서 사용하기

data () {

return {

list: []

}

}

mounted() {

this.$isEmpty(this.list)

}

result

alert('EMPTY!') 호출된다 !

it works!