vue3에서 ref 인스턴스를 ts InstanceType과 결합하는 문제를 해결하는 방법-View.js-php.cn

vue3에서 ref 인스턴스를 ts InstanceType과 결합하는 문제를 해결하는 방법

WBOY

풀어 주다： 2023-05-20 22:59:32

앞으로

1750명이 탐색했습니다.

vue3은 ts의 InstanceType과 결합된 ref 인스턴스를 얻습니다.

때때로 템플릿 참조를 사용하는 경우 ts 프롬프트가 작동하지 않습니다. 별로 영향을 미치지는 않지만 해결될 수 있습니다~

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from &#39;vue&#39;

const sayHello = () => (console.log(&#39;我会说hello&#39;))

defineExpose({
  sayHello
})
</script>

로그인 후 복사

그런 다음 상위 수준에서 사용합니다. MyModalRef.value를 입력하면 sayHello 함수 프롬프트가 없다는 것을 알 수 있으므로 이번에는 인스턴스 유형을 가져오려면 InstanceType 도구 유형을 사용해야 합니다

<!-- App.vue -->
<script setup lang="ts">
import MyModal from &#39;./MyModal.vue&#39;
const MyModalRef = ref()

const handleOperation = () => {
  MyModalRef.value.sayHello
}
</script>

로그인 후 복사

vue3에서 ref 인스턴스를 ts InstanceType과 결합하는 문제를 해결하는 방법

InstanceType 도구 유형을 사용하여 인스턴스 유형을 가져옵니다.

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from &#39;vue&#39;

const sayHello = () => (console.log(&#39;我会说hello&#39;))

defineExpose({
  open
})
</script>

로그인 후 복사

Parent use

<!-- App.vue -->
<script setup lang="ts">
import MyModal from &#39;./MyModal.vue&#39;

const MyModalRef = ref<InstanceType<typeof MyModal> | null>(null)

const handleOperation = () => {
  MyModalRef.value?.sayHello()
}
</script>

로그인 후 복사

메시지가 표시될 때 InstanceType을 사용하라는 메시지가 아직 없는 것 같습니다. , 그리고 나서 오류 내용을 입력하면 컴파일 전에는 오류가 보고되지 않습니다... 그런데 Vue 공식이 이렇게 말하더군요. 그러면 들어보세요(사실 저는 평소에 잘 사용하지 않지만 배웠습니다)

@vue 공식 API 구성 요소 템플릿 참조 유형에 주석 달기

vue3 구성 요소에 대한 TS 유형에 주석을 추가하는 방법

Vue3과 TS는 확실히 올해 가장 인기 있는 것들입니다. 프런트 엔드 기술 목록에 오신 것을 환영합니다. 많은 회사에서 Vue3 + TS + Vite 조합을 사용하여 새로운 프로젝트를 개발하고 있습니다. 다음은 다시 작성한 문장입니다. Vue3 컴포넌트에서 TS 유형과 결합된 Composition-Api를 사용하는 방법을 공유합니다.