vue.js plugin으로 global method 만들기
DOCUMENT
플러그인 사용법
먼저 플러그인은 제공자와 사용자로 나뉩니다. 이때 두 사이를 이어주는 것이 Vue의 install 메서드입니다. 아래는 각각 예제 코드입니다.
제공자 코드
*// my-plugin.js*MyPlugin.install = function (Vue, options) { */* ... */*}
사용자 코드
import MyPlugin from 'my-plugin'; Vue.use(MyPlugin);
- 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
- main에서 import
import EmptyCheck from './js/common/emptyCheck' // 가장 처음 로드되는 main.js 에서 import
- Vue.use로 등록
Vue.use(EmptyCheck) // EmptyCheck를 use하고 파일 내 install method 실행
component
- component에서 사용하기
data () {
return {
list: []
}
}
mounted() {
this.$isEmpty(this.list)
}
result
alert('EMPTY!') 호출된다 !
it works!