Vue - 인스턴스

vm.$인스턴스 속성

• vm.$data
• vm.$props
• vm.$el
• vm.$options
• vm.$parent
• vm.$root
• vm.$slots
• vm.$scopedSlots
• vm.$refs
• vm.$isServer
• vm.$attrs
• vm.$listeners

- $refs

$refs를 알기전에 ref(Reference)[참조]에 대해서 알아여 한다.

[ ref ]

ref 엘리먼트 또는 자식 컴포넌트에 대한 참조를 등록하는데 사용한다. 

참조는 부모 컴포넌트의 $refs 객체 아래에 등록된다. 

일반 DOM 엘리먼트에서 사용되는 경우 참조는 해당 엘리먼트이다. 

하위 컴포넌트에서 사용되는 경우 참조는 컴포넌트 인스턴스이다.

<!-- vm.$refs.p는 DOM 노드가 됩니다 -->
<p ref="p">hello</p>
 
<!-- vm.$refs.child는 자식 컴포넌트 인스턴스가 됩니다. -->
<child-comp ref="child"></child-comp>

즉, $refs는 ref의 집합

[ ref ]속성이 등록된 자식 컴포넌트를 보관는 객체이다

HTML

<p
  ref="create"
  @hide="hideEvent"
  @shown="showEvent"
  >
hello
</p>

JS

this.$refs.create.hide()

이런식으로 응용 해서 사용이 가능하다.

vm.$인스턴스 메소드/데이터

• vm.$watch
• vm.$set
• vm.$delete

vm.$인스턴스 메소드/이벤트

• vm.$on
• vm.$once
• vm.$off
• vm.$emit

vm.$인스턴스 메소드/라이프 사이클

• vm.$mount
• vm.$forceUpdate
• vm.$nextTick
• vm.$destroy