Vue 해결 this.$를 통해refs에서 DOM 또는 구성 요소 오류 문제를 가져옵니다.

1.this.$에 관하여refs의 사용 장면
일반 요소에 ref 속성을 추가하면this.$refs.name 은 DOM 요소를 가리킵니다.

hello

만약 ref 속성이 구성 요소에 추가된다면this.$refs.name 이 구성 요소 실례를 가리키다


2. 왜 가끔 this.$를 통해refs.name 가져오면 오류가 발생합니까?
비교적 흔히 볼 수 있는 장면: 탄창이 열릴 때this.$를 통해refs에서 내용을 가져오면 xxx is undefined 오류가 발생합니다
ref 자체가 렌더링 결과로 만들어졌기 때문에 렌더링할 때 접근할 수 없습니다. 왜냐하면 그들은 존재하지 않기 때문입니다!
만약 이때 코드가 이렇게 코드를 써야 한다면, 당신은 DOM 렌더링이 끝난 후에 다시 얻을 수 있습니다

this.$nextTick(() => {
 this.$refs.name... //DOM 
})

보충 지식: vue ref 사용법 (this.$refs 획득은 비어 있음)
//6.14 업데이트
하지만 방법이 있어요. 저희가 사용할 수 있어요.

this.$nextTick(() => {
  // todo
})
 
setTimeout(() => {
  // todo
}, 0)

데이터를 얻기 위해
ref
그 자체가 렌더링 결과로 만들어져서 처음 렌더링할 때 접근할 수 없고 존재하지 않습니다.
$refs는 응답식이 아닙니다. 구성 요소 렌더링이 끝난 후에만 채워집니다.
요소 또는 하위 구성 요소 등록 참조 정보에 사용됩니다. 등록이 완료되면 상위 구성 요소 $refs 대상에 등록됩니다.
만약 당신이 얻은 것이 항상 비어 있다면, 주의하십시오.
1. 당신은 어디에서 호출하고 당신이 호출하는 대상과
mounted () 에서 호출해 보세요. 효과가 있습니까?
호출된 대상이 원래 존재하는지, 아니면 데이터 렌더링이 필요한 후에야 나타나는 것인지, 같은 이치로 mounted () 에서 호출해 보자
2. 호출 대상이 그룹 목록인지 여부
처음에ref를 v-for 목록에 설정하고this.$를 직접 가져옵니다.refs.name.스타일, 영원히 비어,
나중에 발견,this.$refs.name는 하나의 그룹입니다. 통과할 수 없습니다.스타일 가져오기 스타일,
이것만 훑어볼 수 있습니다. $refs.name 배열,this.$에서refs.name[index]에서 스타일 설정
//6.14 업데이트, 이 견해는 약간 문제가 있다
하지만 높이 너비처럼 오프셋 하이라이트를 통해 얻을 수 있다.
3. 호출 대상이 v-if와 결합하여 사용하는지 여부
ref는 응답식이 아닙니다. 모든 동적 불러오는 템플릿 업데이트는 변경할 수 없습니다.
마지막
사용 중, $refs를 발견했습니다.style은 이 대상의 스타일만 설정할 수 있습니다. 가져온 값은 비어 있습니다.
위의 Vue 솔루션은 this.$를 통해 해결되었습니다.refs가 DOM이나 구성 요소의 오류를 가져오는 문제는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고해 주시고 저희를 많이 사랑해 주시기 바랍니다.