Vue:Ref

ref속성과, this.$refs를 사용한 자식 컴포넌트의 인스턴스 및 요소에 접근.

How to use

물론 props와 events가 존재하지만, 가끔 JavaScript에서 자식 요소에 직접 접근해야 하는 경우가 있습니다. 이 경우, ref 속성을 이용해 자식 요소에 레퍼런스 ID를 할당하여 해결할 수 있습니다.

예를 들어:

<base-input ref="usernameInput"></base-input>

이제 ref를 이용해 ID를 정의한 컴포넌트 안에서 아래와 같이 작성하면:

this.$refs.usernameInput

<base-input> 인스턴스에 접근할 수 있습니다.

v-for 목록의 ref 접근 방법

• Stackoverflow - Vue.js ref inside the v-for loop

<list-item
  v-for="item in items" 
  :key="item.id" 
  :value="item.text" 
  ref="items"
/>

And use the refs in your component like this:

this.$refs.items[index]

See also

• vue

Favorite site

• 자식 컴포넌트의 인스턴스 및 요소에 접근하기