$refs를 사용하여 Vue의 구성 요소 및 HTML 요소에 액세스하는 방법

$refs Vue는 Vue 인스턴스의 구성 요소와 HTML 요소에 액세스할 수 있는 매우 편리한 기능입니다. 이 기능을 사용하면 템플릿, 계산된 속성, 메서드 및 수명 주기 후크의 DOM 요소에 직접 액세스할 수 있으며 코드 작성을 단순화할 수 있습니다. 이 기사에서는 $refs를 사용하여 Vue의 구성 요소 및 HTML 요소에 액세스하는 방법을 소개합니다.

1. 구성요소에 액세스

Vue에서는 구성요소가 중요한 모듈이므로 프로젝트에서 많은 구성요소를 사용하므로 구성요소에 대한 액세스가 필요합니다. 그렇다면 $refs를 사용하여 구성 요소에 액세스하려면 어떻게 해야 할까요?

Vue에서는 구성 요소의 ref 속성을 설정할 수 있습니다. 템플릿이나 JS에서는 $refs를 사용하여 이 구성 요소에 액세스할 수 있습니다.

예제를 작성해 보겠습니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component ref="myComponent"></child-component>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
'./ChildComponent.vue'에서 ChildComponent 가져오기

기본값 내보내기 {
구성 요소: {

ChildComponent

},
Mounted() {

this.$refs.myComponent.doSomething()

}
}
2cacc6d41bbb37262a98f745aa00fbf0

이 예에서는 상위 구성 요소 하위 구성 요소의 하위 구성 요소를 참조하고 다음을 추가했습니다. 액세스를 위한 ref 속성입니다. 마운트된 라이프사이클 후크에서 이 구성요소에 액세스하고 이 구성요소의 doSomething 메소드를 호출할 수 있습니다.

요컨대 $refs를 사용하여 구성 요소에 액세스하는 것은 매우 편리하며 액세스 작업에 직접 사용할 수 있습니다.

2. HTML 요소에 액세스

$refs를 사용하여 HTML 요소에 액세스하는 것도 매우 간단합니다. 요소에 대한 ref 속성을 설정한 다음 $refs를 사용하여 JS에서 이 요소에 액세스할 수도 있습니다. 예를 작성해 봅시다:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<input type="text" ref="myInput">

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
Mounted() {

this.$refs.myInput.focus()

}
}
2cacc6d41bbb37262a98f745aa00fbf0

이 예에서는 액세스를 위해 입력 요소에 ref 속성을 추가합니다. 마운트된 수명 주기 후크에서 focus() 메서드를 호출하여 입력 요소를 포커스로 만듭니다.

마찬가지로 $refs를 사용하여 HTML 요소에 액세스하는 것도 매우 편리합니다. 템플릿의 요소에 ref 속성을 직접 추가하여 액세스 작업을 수행할 수 있습니다.

3. 주의 사항

Vue에서는 $refs를 사용하여 구성 요소 및 HTML 요소에 액세스하는 것이 매우 편리하지만 주의해서 사용해야 합니다. $refs에서 액세스하는 구성 요소와 요소는 렌더링되어야 합니다. 마운트하기 전에 요소나 구성 요소에 액세스하면 정의되지 않은 상태가 됩니다.

Vue 구성 요소에서 비동기 작업을 수행하거나 데이터를 조작하면 이 구성 요소의 수명 주기 후크가 변경됩니다. 이 변경으로 인해 $refs가 정의되지 않은 상태로 반환될 수 있습니다. 따라서 $refs를 사용할 때는 주의하고 요소나 구성 요소에 액세스할 때 렌더링되었는지 확인하세요.

동시에 구성 요소의 고유성을 보장하기 위해 구성 요소의 이름에도 주의를 기울여야 합니다. 왜냐하면 $refs를 통해 컴포넌트에 접근할 경우, 이름이 같은 컴포넌트가 여러 개 있을 경우 잘못된 컴포넌트에 접근할 수 있기 때문입니다.

4. 요약

Vue에서는 $refs를 사용하여 구성 요소 및 HTML 요소에 액세스하는 것이 매우 편리합니다. 컴포넌트나 요소에 ref 속성을 추가하기만 하면 JS에서 액세스할 수 있습니다. 그러나 $refs에 의해 반환된 구성 요소나 요소가 이미 렌더링되었으므로 주의해야 하며 구성 요소의 고유성을 보장하기 위해 구성 요소 이름 지정에 주의해야 합니다.

실제 개발에서는 $refs를 v-if, v-for 및 기타 지침과 함께 사용하여 프로젝트를 더 잘 완료할 수 있습니다. 물론 $refs를 과도하게 사용하지 않도록 주의하고 상위 구성 요소의 하위 구성 요소에 있는 데이터를 직접 수정하지 마십시오. 그러면 단방향 데이터 흐름의 원칙이 파괴됩니다.

위 내용은 $refs를 사용하여 Vue의 구성 요소 및 HTML 요소에 액세스하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!