[Vue.js] 인스턴스 속성(Instance Properties)

 

 

Vue 객체의 속성 중 $가 붙은 것은 '내장 객체'라고 하며, 각 컴포넌트의 option들에 접근할 수 있는 속성들이다.

console.log(this)를 찍어보면 options 밑에 여러 객체가 있는 것을 확인할 수 있다.

 

 

◽ $data

컴포넌트 인스턴스의 data 옵션에 접근한다.

 

◽ $el

엘리먼트에 접근한다.

 

◽ $root

현재 컴포넌트 트리의 root Vue 인스턴스를 찾는다.

현재 인스턴스에 부모가 없다면 $root 값은 현재 인스턴스이다.

 

◽ $options

해당 컴포넌트의 option들에 접근할 수 있다.

컴포넌트의 스크립트 영역 안에 정의된 data, created, method, props 등을 option이라 일컫는다.

이미 정의된 옵션말고도 커스터마이징한 옵션에도 접근할 수도 있다.

// this.$root 컴포넌트 안의 props 옵션에 접근한다.
this.$root.$options.props

// filters 안에 선언한 커스텀 메서드에 접근한다.
this.$parent.$options.filters.customMethod

 

◽ $refs

props와 이벤트가 존재하지만, 가끔은 자식 요소에 Javascript를 이용해 직접 접근해야 하는 경우가 있다.

이 경우 ref 속성을 사용하여 레퍼런스(reference) ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있다.

 

예제 1.

// HTML 영역
<div ref="target"></div>

// 스크립트 영역
...
methods: {
	testMethod() {
		this.$refs.target.innerText = "이것은 ref를 사용하는 방법";
    }
}

 

예제 2.

// HTML 영역
<input ref="myInput" type="text" />

// 스크립트 영역
methods: {
	// myInput이라는 ID를 가진 input에 접근하여 포커싱하는 메서드
	inputfocus() {
		this.$refs.myInput.focus()
    }
}

 

 

💡 $refs 사용 시 주의사항

초기 렌더링 단계에서는 접근할 수 없고, 비반응성(non-reactive)이므로 데이터 바인딩을 위한 템플릿에서 사용해서는 안된다.

 

 

출처 및 참조

Vue.js - $options 써보기

인스턴스 속성(Instance Properties) | Vue.js

 

템플릿 refs | Vue.js

---

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