Vue.js 러닝 가이드북

요소/컴포넌트 접근

$root 속성

일반적으로 루트 Vue 인스턴스에 데이터나, 계산된 속성, 메서드를 설정하지는 않습니다. 하지만 필요한 경우 데이터, 메서드, 계산된 속성을 설정한 후 자식 컴포넌트에서 이를 활용할 수 있습니다.

main.js



 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 




new Vue({
  el: "#app",
  // 루트 인스턴스 데이터
  data: {
    keyCodes: {
      space: 32,
      f1: 112,
      // ...
    }
  },
  // 루트 인스턴스 계산된 속성
  computed: {
    keyCodeCount() {
      return this.keyCodes.length;
    }
  },
  // 루트 인스턴스 메서드
  methods: {
    keyCode(name) { return this.keyCodes[name]; }
  },
  components: { App },
  template: "<App/>"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

루트에 정의된 데이터, 계산된 속성, 메서드는 $root 속성을 사용해 모든 자식 컴포넌트에서 가져다 사용할 수 있습니다.

<p>루트 인스턴스에 등록된 키코드 개수: {{ $root.keyCodeCount }}</p>
1
methods: {
  onKeyUp(e) {
    const f1 = this.$root.keyCode('f1');
    if (e.keyCode == f1) { ... }
  }
}
1
2
3
4
5
6

주의!

루트 Vue 인스턴스에 데이터, 메서드, 계산된 속성을 설정하고 공유하는 방법은 권장되지 않습니다. Vuex 라이브러리를 사용해 데이터를 중앙 집중 관리하는 패턴이 권장됩니다.

$parent 속성

$parent 속성은 컴포넌트 통신 방법인 속성 전달(props), 커스텀 이벤트($emit) 대신 사용될 수 있습니다.

<figure v-for="(item,i) of $parent.list" :key="i"> ... </figure>
1


 



 



methods: {
  getItemFromParentList(index=0) {
    return this.$parent.list[index];
  },
  addItemToParentList(item) {
    if (!item) { return; }
    this.$parent.list.push(item);
  }
}
1
2
3
4
5
6
7
8
9

예제

아래 예제 코드(Line 10)를 보면 자식 컴포넌트인 google-map-marker에서 부모 컴포넌트인 google-map의 메서드 getMap에 접근해 사용하기 위해 $parent 속성을 사용했습니다.

NOTE

부모 컴포넌트 참조 속성이 $parent인 것처럼, 자식 컴포넌트들(배열)을 참조하는 속성은 $children 입니다.

주의!

$parent, $children 속성 사용이 자칫 편리해보일 수 있으나, 애플리케이션 규모가 커지면 디버깅 하기 어려워집니다. 일반적으로 권장되는 방법은 props, $emit을 사용한 컴포넌트 통신입니다.

ref 속성

Vue.js는 컴포넌트 또는 HTML 요소노드를 참조하는 특별한 ref 속성을 제공합니다.

<a href="/profile" ref="link_profile">프로필</a>

<app-component ref="AppComponent"></app-component>
1
2
3

$refs 속성

ref 속성이 추가된 HTML 요소, 컴포넌트는 Vue 인스턴스의 $refs 속성에 수집됩니다.

mounted() {

  const { link_profile, AppComponent } = this.$refs;

  // link_profile === DOM 요소
  link_profile.classList.add('control-ref');

  // AppComponent === Vue 컴포넌트
  AppComponent.$props.message = '마운트 시점에 message 속성 전달';

}
1
2
3
4
5
6
7
8
9
10
11

NOTE

DOM 요소는 실제 DOM에 추가된 이후 접근 조작할 수 있습니다. 그렇기 때문에 mounted 훅 함수를 사용해 접근 조작해야 정상적으로 작동합니다. (beforeCreate, created, beforeMount 훅 함수에서는 작동 안합니다)

주의!

Vue 인스턴스의 $refs 속성은 컴포넌트 렌더링이 완료된 이후, HTML 요소나 컴포넌트를 수집합니다. 이 속성은 반응성을 가지지 않기 때문에 템플릿이나 계산된 속성에서 $refs를 사용하면 안됩니다.


예제 코드에서 ref 속성이 적용된 템플릿 부분과 $refs 속성에 접근 조작하는 로직 부분을 살펴보세요.

참고

자세한 사용법은 요소/컴포넌트 접근 문서를 참고하세요.

← 의존성 주입 →