props에서 추론된 일반 데이터 유형이 있는 Vue 3/Nuxt 3 범위 슬롯

Question

Nuxt v3에 캐러셀 컴포넌트를 구현하고 싶습니다. 이 구성요소는 항목 목록을 수신합니다. 이 구성 요소는 스타일이나 구조가 아닌 논리만 구현합니다.

이제 내 구성 요소는 다음과 같습니다.

组件/tdx/carousel.vue

으아악

여기서 캐러셀의 논리는 중요하지 않습니다.

부모 구성 요소에서는 다음과 같은 구성 요소를 사용할 수 있습니다.

으아악

이거 정말 효과가 좋아요. 그 외에 내가 원하는 것은 타이핑이다. title 和 description 的类型当然是any，因为在 carousel.vue 的 props 中，项目的类型是 unknown[].

일반 컴포넌트를 만드는 방법을 보여주는 이 기사를 찾았지만, nuxt의 자동 가져오기 시스템을 망쳐야 하기 때문에 이것을 원하지 않습니다.

carousel.vue 속성의 특정 항목에서 유형 추론을 구현하는 방법은 무엇입니까?

Answer 1

업데이트 날짜: 2023년 5월

Vue 3.3부터 범용 컴포넌트를 공식적으로 지원합니다.

공통 매개변수를 정의해야 합니다. 제네릭을 올바르게 가져오도록 carousel.vue 组件以使用 标记中的 generic 属性，并将其转换为使用基于类型的defineProps의 메서드를 수정하세요.

으아악

이제 슬롯의 소품이 아이템 유형에 따라 올바르게 추론됩니다.

2023년 5월 이전

• RFC #436

이전 버전의 VSCode/Volar에서는 Experimental 플래그를 활성화해야 했습니다. vueCompilerOptions 下启用 tsconfig.json 的 experimentalRfc436 옵션에 있어야 합니다.

으아악

최신 버전의 Volar에서는 기본적으로 활성화되어 있으므로 더 이상 필요하지 않습니다.