Vue - v-for 루프는 여러 개의 "반복된" 하위 구성 요소를 렌더링합니다(참조만 다름, this.$refs.xx는 여전히 사용할 때 하위 구성 요소를 정확하게 찾을 수 있음) 하위 구성 요소 참조를 동적으로 설정하여 각 하위 구성 요소는 의 "독립" "입니다! 자세한 튜토리얼

머리말

이 튜토리얼의 다른 버전: uni-app | WeChat 애플릿

ref 값을 구성 요소에 바인딩한 다음 this.$refs.xx를 통해 이 구성 요소의 메서드와 변수를 가져옵니다.

구성 요소가 v-for(고정된 참조 바인딩) 의 이 참조는 "정확히 동일"하며 전혀 찾을 수 없습니다(this.$refs.xx는 누구입니까?).

이 문제를 해결하려면 서로 다른 ref 속성 값을 동적으로 최종적으로 프로그램에서 "자동으로" 찾을 수 있습니다.


아래 그림과 같이 부모 컴포넌트 버튼을 클릭하면 자식 컴포넌트 메소드가 호출되어 텍스트의 효과를 설정하고,

여러 하위 구성 요소는 여러 하위 구성 요소를 렌더링하기 위해 v-for 루프로 래핑됩니다. 각 하위 구성 요소는 서로 다른 ref를 가지므로 모두 "독립적"입니다.

仅完成了核心功能,代码干净整洁注释详细

여기에 이미지 설명 삽입

샘플 소스 코드

원 클릭 복사 기능을 사용하고 새 페이지를 찾은 다음 직접 실행하여 효과를 확인하는 것이 좋습니다.

추천

출처blog.csdn.net/weixin_44198965/article/details/129141566