본문 바로가기
Framework/vue_Architecture

$ref, $refs - DOM접근(vue.js)

by cariño 2023. 1. 10.
728x90
반응형

$ref속성은 지양된다. virtual DOM을 사용할 필요성을 잃기 때문에 예외적인 경우를 제외하곤 $ref 속성은 지양해야 한다. 

접근하고 싶은 태그에 ref속성명을 할당해준다. 

ex)  <input type="text" ref="inputRef" />

 

 

[mounted]

$refs는 컴포넌트가 렌더링 된 후 접근할 수 있다. 

dom이 부착되기 전인 beforeCreated(), created() 에서 $refs를 접근한다면 undefined가 출력되는것을 확인할 수 있다. 

 

 

refs를 활용한 자식 컴포넌트 DOM접근이 가능하다. 

https://coonihong.tistory.com/38

 

[Vue.js] refs를 활용한 DOM 접근 방법

이번 포스트에서는 Vue에서 제공하는 refs를 활용하여 DOM에 접근하는 방법에 대해서 다뤄보겠습니다. Refs JavaScript에서는 DOM과 엘리먼트를 직접 조작하기 위해서는 getElementById, getElementsByClassName, qu

coonihong.tistory.com

 

728x90

'Framework > vue_Architecture' 카테고리의 다른 글

http통신 연습(vue)  (0) 2023.01.09
Components_provide, inject, Dynamic component(2)  (0) 2023.01.06
Custom Event (vue.js)  (1) 2023.01.06
Components(1)  (0) 2023.01.06
Vue Router - Route, Router 차이  (0) 2023.01.05

댓글