vue에서 $refs와 $el의 사용법은 무엇입니까

사용법: 1. "$refs"는 요소 또는 하위 구성 요소에 대한 참조 정보를 등록하는 데 사용되며 구문은 "this.$refs.(ref value)" 또는 "this.$refs.(ref value).method입니다. ()"; 2. "$el"은 Vue 인스턴스와 연관된 DOM 요소를 얻는 데 사용되며 구문은 "this.$refs.comComponent"입니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue에서 $refs 및 $el의 용도는 무엇입니까?

ref는 요소 또는 하위 구성 요소에 대한 참조 정보를 등록하는 데 사용됩니다.

ref에는 세 가지 용도가 있습니다:

　1. 일반 항목에 ref를 추가하려면 요소의 경우, 이 .$refs.(참조 값)을 사용하여 dom 요소를 가져옵니다.

2. 하위 구성 요소에 ref를 추가하고, this.$refs(참조 값)를 사용하여 구성 요소 인스턴스를 가져옵니다. 요소. 메소드 사용시 this.$refs.(ref value).method()를 직접 사용할 수 있습니다.

　　3. v-for 및 ref를 사용하여 배열 또는 dom 노드 세트를 얻는 방법

　v-for 순회를 통해 다른 ref를 추가하려면 : 기호, 즉 ref = 변수를 추가해야 합니다. ;

　이것과 다른 점은 속성이 동일합니다. 고정값인 경우 : 기호를 추가할 필요가 없습니다. 변수인 경우 : 기호를 추가해야 합니다. (콜론이 있으면 뒤에 오는 것이 변수나 표현식이라는 의미이고, 콜론이 없으면 해당 문자열 상수(String)를 의미합니다.

주의해야 할 함정은 다음과 같습니다.

1. ref가 필요합니다. 예, DOM을 사용할 때 DOM이 렌더링되었는지 확인하세요. 예를 들어, 라이프 사이클 Mount(){} 후크에서 호출하거나 this.$nextTick(()=에서 호출하세요. >{})

2. ref가 중복된 이름이 여러 개인 경우 ref의 값은 배열이 됩니다. 단일 ref를 얻으려면

vm.$el

을 반복하면 됩니다. Vue 인스턴스와 연결된 DOM.

예를 들어 사용자 정의 구성 요소 tabControl을 가져오고 해당 OffsetTop을 가져오려면 먼저 구성 요소를 가져와야 합니다.

속성 ref='a 이름(tabControl2)을 설정해야 합니다. '를 구성 요소에서

하면 $refs.tabControl2가 구성 요소

를 가져옵니다. ref 속성을 가져오며 구성 요소를 가져올 때 OffsetTop을 가져오려면 $refs

를 사용해야 합니다. , OffsetTop이 없으며 .OffsetTop을 클릭하여 얻을 수 없습니다. 컴포넌트에서 DOM 요소를 가져오려면 $el을 사용해야 합니다

[관련 권장 사항: "vue.js tutorial"]

위 내용은 vue에서 $refs와 $el의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!