기본적으로 DOM 엘리먼트 접근을 피하는 것이 좋지만, 예외적인 경우에 사용한다.
(1)루트 엘리먼트 접근
new Vue({
data:{
foo:1
}
})
this.$root.foo
//하위 컴포넌트에서 이렇게 접근
⚠ 어플리케이션 크기가 커지면 해당 패턴을 확장하기 어렵다. 상태 관리를 위해 Vuex 사용을 강력히 권함!
(2)부모 컴포넌트 접근
prop을 이용해 데이터를 넘겨주는 것의 (조금 뒤떨어지는) 대안으로써 사용할 수 있다.
<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-markers자식 컴포넌트에서 아래 방식으로
var map = this.$parent.map || this.$parent.$parent.map
⚠ 손대기 힘들기 때문에 (4)의존성 주입 사용이 권장된다.
→ 또한, 일반적으로 부모데이터를 자식에서 변경하는 경우 디버깅의 편의성과 코드 가독성을 해친다.
** 이건 사실 이해가 잘 안됨ㅠ 양방향 :data.sync 대신에 이러한 예외 방법을 사용할 일이 있나?
(3) 자식 컴포넌트의 인스턴스 및 요소에 접근하기
부모
<base-input ref="usernameInput"></base-input>
// <base-input>인스턴스에 접근
this.$refs.usernameInput