refs

Template refs?

기본 DOM 요소에 직접 접근하게 하는 속성.

ref 속성을 통해 마운트 된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있다.

refs 접근 방식

1. Composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 한다.
2. 컴포넌트가 마운트 된 후에 접근할 수 있다.
3. <template> 안에서 input으로 ref참조에 접근하려는 경우 렌더링되기 전에는 참조가 null일 수 있다.
4. <template> 안에서 $refs 내장 객체로 ref 참조에 접근할 수 있다.
5. v-for내부에서 ref가 사용될 때 ref는 마운트 후 요소 배열로 채워진다.

Function refs

ref속성에 문자열 키 대신 함수를 바인딩할 수 있다.

Component refs

ref는 자식 컴포넌트에서도 사용 가능하다. ref로 자식 컴포넌트에 참조값을 얻게 되면 자식 컴포넌트의 모든 속성과 전체 메소드에 접근할 수 있다.

이러한 경우 부모>자식 컴포넌트 간 의존도가 생기기 때문에 이러한 방법은 반드시 필요한 경우에 사용한다. (ref 보다는 prop을 사용해서 상호작용을 구현하는 것이 일반적이다.)

$parent

자식 컴포넌트에서 상위 컴포넌트에 참조하기 위해서는 $parent 내장객체를 사용할 수 있다.