[Vue.js] Vue.prototype.$ / 인스턴스 프로퍼티 사용하기

 

◽ 개요

많은 컴포넌트에서 사용하고 싶은 데이터나 유틸리티가 있지만 global scope에 의해 오염되는 것은 원하지 않는다.

이 때 이런 것들을 prototype에서 정의하면 각 Vue instance에서 사용할 수 있다.

 

◽ 문법

앞에 $를 붙여준다. 이 기호는 Vue에서 사용하는 것으로, 모든 인스턴스에서 사용가능한 프로퍼티라고 알려주는 하나의 방식이다.

변수나 computed 요소, 메소드 등의 이름이 겹치는 경우가 있을 수 있으므로 이 기호를 사용하면 같은 이름으로 인한 충돌을 피할 수 있다.

// 데이터 정의하기
Vue.prototype.$appName = 'My App'

// function 정의하기
Vue.prototype.$appName = function thisFunc() {
    // 기능정의
    ...
};

// axios 정의하기
Vue.prototype.$http = axios

 

 

 

출처

https://kr.vuejs.org/v2/cookbook/adding-instance-properties.html

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.