Vue 예외 케이스 - 루트 엘리먼트 접근

루트 엘리먼트 접근

$root

대부분의 경우, 다른 컴포넌트에 접근하거나 직접 DOM 엘리먼트에 접근하는 것을 피하는 것이 좋다.
그럼에도 불구하고, 이러한 접근이 허용되는 경우가 있다.
new Vue의 모든 하위 컴포넌트에서는 $root 속성을 이용해 루트 인스턴스에 접근할 수 있다.

// 루트 Vue 인스턴스
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

// root data 가져오기
this.$root.foo

// root data 수정
this.$root.foo = 2

// Access root의 computed 속성 접근
this.$root.bar

// root의 methods 호출
this.$root.baz()

$parent

$root와 비슷하게 $parent 속성을 사용하여 자식 요소에서 부모 인스턴스에 접근할 수 있다.
이는 props를 이용해 데이터를 넘겨주는 것의 (조금 떨어지는) 대안으로써 사용할 수 있다.
가끔 부분적으로 컴포넌트 간의 공유가 이루어져야 하는 라이브러리(ex. google map)가 존재한다.

<!-- 예시 코드 -->
<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

google-map-region이나 google-map-markers이
google-map의 map 속성에 접근할 할 경우 $parent를 사용하여 접근한다.

let map = this.$parent.map || this.$parent.$parent.map

하지만 $parent의 사용은 디버깅 편의성이나 코드 가독성이 안 좋아지기 때문에 남용해선 안 된다.

injection

이전의 케이스에서 본 $parent 속성은 여러 번 중첩된 컴포넌트에 대한 접근 방법으로는 적합하지 않다.
이 경우, provide와 inject 두 개의 옵션을 사용하는 의존성 주입을 사용할 수 있다.
provide 옵션은 모든 하위 자식들에게 제공하고자 하는 data 및 methods를 특정할 수 있게 한다.

<!-- 예시 코드 -->
<!-- <google-map> 안의 getMap 메소드를 제공하고자 하는 경우 -->
<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

// 부모 컴포넌트
provide: function () {
  return {
    getMap: this.getMap
  }
}

// 메소드를 사용하고자 하는 자식 컴포넌트
inject: ['getMap']

사실 의존성 주입은 아래의 것들을 제외하고는 일종의 장거리 props라 생각할 수 있다.

• 상위 컴포넌트는 provide 속성을 사용하는 하위 컴포넌트를 알 필요가 없다.
• 하위 컴포넌트는 inject 속성이 어디서 왔는지 알 필요가 없습니다.

ref

물론 props와 event가 존재하지만, 가끔 Javascript에서 자식 요소에 직접 접근해야 하는 경우,
ref 속성을 이용해 자식 요소에 레퍼런스 ID를 할당하여 해결할 수 있다.
$refs는 반응형이 아니다.
때문에 template 이나 computed 속성 안에 포함시키지 않는 것이 좋다.

<!-- 자식 컴포넌트 -->
<input ref="input">

// 자식 컴포넌트
methods: {
  // Used to focus the input from the parent
  focus: function () {
    this.$refs.input.focus()
  }
}

<!-- 부모 컴포넌트 -->
<base-input ref="usernameInput"></base-input>

// 부모 컴포넌트
this.$refs.usernameInput