vue의 선언전 렌더링 모델은 대부분의 DOM작업을 “대신” 수행한다. 하지만 때론 기본 DOM요소에 직접 접근해야 되는 경우가 있는데, 이 때 ref 속성을 사용해서 접근할 수 있다.
$refs 내부 참조
사용해보기
TheView.vue
코드 복사하기
부모에서 자식 컴포넌트 TemplateRef를 등록한다.
TemplateRefs.vue ( ref=’변수’ ⇒ 문자열 바인딩 방식 )
코드 복사하기
input 필드에 ref속성으로 변수 input을 바인딩하면 렌더링이 되지 않는다.
왜냐하면 ref속성은 mount가 되어야지 참조할 수 있는 속성이기 때문이다.
•
확인
•
해결 (TemplateRefs.vue)
이렇게 p태그 옆에 input이 존재할 때만 렌더링하는 조건문을 달아주면 해결이 된다.
$refs사용
컴포넌트 인스턴스의 내장 객체 $refs 를 통해서도 input변수에 접근이 가능하다.
확인 완료
v-for 와 내부 참조
onMounted 메소드 내부에서 참조 했을 때
TemplateRefs.vue
코드 복사하기
→ onMounted 함수 내부에서는 ref 속성을 참조할 수 있다.
→ 렌더링 된 후에 참조되는 것이기 때문에 item에느 DOM자체가 참조되고 있다.
•
확인
forEach문의 item엔 DOM자체가 참조되고 있다.
•
컨텐츠만 뽑아쓰기
textContent로 DOM의 컨텐츠에 접근할 수 있다.
함수로 바인딩 하기
TemplateRefs.vue
코드 복사하기
→ ref를 v-bind 문법으로 함수로도 전달 가능하다.
→ 함수에 전달되는 값은 엘리먼트이고 엘리먼트의 속성을 함수에서 사용할 수 있다.
→ ref를 참조해서 사용하려면 렌더링이 되고난 이후이무로 onMounted에서 참조가 가능하다.
•
확인
ref속성을 함수로 바인딩해서 사용하였다.
자식 컴포넌트에도 사용하기
ref 를 자식 컴포넌트에도 사용할 수 있다. ref 로 자식컴포넌트의 참조값을 가지면 자식 컴포넌트의 모든 속성과 메소드에 접근할 수 있는데, 이렇게 되면 의존도가 생겨나므로 반드시 필요한 경우에만 사용해야된다. 일반적으로는 props로 단방향 의존도를 구현하는 것을 권장한다.
ref로 자식요소의 데이터에 접근 해보기
TemplateRefsChild.vue
코드 복사하기
자식요소에 반응형 데이터와 함수를 구현해보자.
TemplateRef.vue
코드 복사하기
→ 컴포넌트 TemplateRefChild 등록해서 사용
→ 반응형 데이터를 ref로 바인딩 → ref=”child”
→ 렌더링 된후 (onMounted 함수 내부) ref요소에 접근해서 값 사용
•
확인
ref로 자식요소의 메소드를 출력해보기
TemplateRef.vue
•
확인
$parent 자식 컴포넌트에서 부모 속성 접근하기
TemplateRefsChild.vue
자식요소에사 $parent로 바로 접근할 수 있다.
•
확인
속성에 접근해서 사용하기
TemplateRefsChild.vue
코드 복사하기
$parent 로 부모 속성중 배열에 접근하여 li요소를 출력해보자.
•
확인
