Vue 3/Nuxt 3 scoped slots with generic data types inferred from props-PHP Chinese Network Q&A
Vue 3/Nuxt 3 scoped slots with generic data types inferred from props
P粉863295057
P粉863295057 2023-11-02 21:59:05
0
1
608

I want to implement a carousel component in Nuxt v3. This component receives a list of items. This component only implements logic, not style or structure.

Now this is my component:

Component/tdx/carousel.vue

 

The logic of the carousel is not important here.

In the parent component I can use the component like this:

 

This works great. Other than that what I want is typing. The type oftitleanddescriptionis of course any, because in the props ofcarousel.vue, the type of the item isunknown[].

I found this article showing how to make a generic component, but I don't want this because I have to mess with nuxt's auto-import system.

How to implement type inference from a given item in acarousel.vueproperty?

P粉863295057
P粉863295057

reply all (1)
P粉476547076

Updated: May 2023

Starting from Vue 3.3,officially supports common components.

You need to define a common parameter. Modify thecarousel.vuecomponent to use thegenerictag and convert it to use type-baseddefinePropsmethod so that it gets the generics correctly.

 

Props on slots will now be correctly inferred based on item type.

Before May 2023

In earlier versions of VSCode/Volar, you needed to enable theExperimental flag. It requires theexperimentalRfc436option of tsconfig.json to be enabled undervueCompilerOptions.

// tsconfig.json { // ... "vueCompilerOptions": { "experimentalRfc436": true } }

This is no longer necessary as it is enabled by default in recent versions of Volar.

    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!