Vue3의 refs 함수: 구성 요소 인스턴스에 직접 액세스

Vue3의 refs 함수: 컴포넌트 인스턴스에 직접 접근

Vue3에는 컴포넌트 인스턴스에 직접 접근할 수 있는 refs라는 새로운 함수가 추가되어 개발자에게 보다 편리한 개발 방법을 제공합니다. 이 기사에서는 Vue3의 refs 함수에 대해 자세히 알아보고 이를 사용하는 방법과 구성 요소 개발에 대한 가치를 이해합니다.

Vue2 참조 방법

Vue2에서는 $refs를 사용하여 구성 요소나 요소를 참조할 수 있습니다. 예를 들어 다음 코드를 통해 구성 요소 인스턴스를 얻을 수 있습니다.

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myComponentRef)
  }
}
</script>

마운트된 후크에서 $refs를 전달합니다. myComponentRef는 구성 요소 인스턴스에 액세스하여 구성 요소 작업을 어느 정도 용이하게 합니다. 하지만 Vue2에서는 $refs에 다음과 같은 문제가 있습니다.

1. 마운트된 Hook에 $refs가 할당되어 있기 때문에 렌더링 후 바로 컴포넌트를 사용하는 경우 컴포넌트 인스턴스를 찾지 못할 수 있습니다.
2. $refs는 단순한 객체이기 때문에 컴포넌트의 이벤트나 메소드를 듣고 싶다면 마운트된 후크에 수동으로 바인딩해야 합니다.
3. 중첩된 구성 요소의 경우 $refs를 사용하여 손자 구성 요소 인스턴스에 액세스하는 경우 $refs에 대해 재귀 작업을 수행해야 합니다.

Vue3의 참조 방법

Vue2에 비해 Vue3의 새로운 refs 기능은 컴포넌트의 참조 방법을 최적화합니다. refs 함수를 사용하면 $refs를 사용하지 않고도 컴포넌트 인스턴스에 직접 접근할 수 있어 Vue2의 문제를 피할 수 있습니다.

다음 코드를 통해 구성 요소 인스턴스를 얻을 수 있습니다.

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const myComponentRef = ref(null)
    return {
      myComponentRef
    }
  },
  mounted() {
    console.log(this.myComponentRef)
  }
}
</script>

Vue3에서는 ref 함수를 사용하여 myCompomentRef를 반응 변수로 전환합니다. myComponentRef를 포함하는 객체는 설정 후크에 반환되고 구성 요소에 노출됩니다. 마운트된 후크에서는 this.myComponentRef를 통해 구성 요소 인스턴스에 직접 액세스할 수 있습니다.

손자 구성 요소 인스턴스에 액세스해야 하는 경우 refs 함수를 통해 직접 액세스할 수도 있습니다.

<template>
  <div>
    <parent-component ref="parentComponentRef"></parent-component>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const parentComponentRef = ref(null)
    return {
      parentComponentRef
    }
  },
  mounted() {
    console.log(this.parentComponentRef.value.$refs.childComponentRef)
  }
}
</script>

이 예에서는 refs 함수를 통해 상위 구성 요소 인스턴스를 가져옵니다. 마운트된 후크에서는 this.parentComponentRef.value.$refs.childComponentRef를 통해 손자 구성 요소 인스턴스에 액세스할 수 있습니다.

요약

Vue3에서 refs 함수는 Vue2에 존재하는 문제를 피하면서 구성 요소 인스턴스에 액세스하는 보다 직관적이고 편리한 방법을 제공합니다. 이는 Vue3의 새로운 기능 중 하나이기도 하며 개발자가 숙지하는 것이 좋습니다. 설정 후크에서 사용하는 것 외에도 템플릿에서도 사용할 수 있습니다. 예:

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
    <button @click="() => myComponentRef.value.update()">update</button>
  </div>
</template>

이 예에서는 클릭 이벤트를 바인딩하고 버튼을 클릭하면 myComponentRef.value.update() 메서드는 다음과 같습니다. 이렇게 호출됩니다. 마운트된 후크에 이벤트를 수동으로 바인딩할 필요가 없습니다.

마지막으로, 이 글이 Vue3의 refs 기능 사용에 도움이 되기를 바라며, Vue3 개발자에게 몇 가지 아이디어와 참고 자료를 제공할 수도 있습니다.

위 내용은 Vue3의 refs 함수: 구성 요소 인스턴스에 직접 액세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!