엘리먼트 & 컴포넌트 접근

기본적으로 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